Question 199822 in Html Question posted in
Some basic documentation can be found here.

how to set outerHTML to comment dom?

<div id="test">subject</div>

var d=document.getElementById('test');
d.outerHTML='<!-- id="test" -->';
d.outerHTML='<div>test</div>';

but there is error:Failed to set the ‘outerHTML’ property on ‘Element’:

I can set it to but can not set it again.

I want to learn vitrual dom concept.

<div id="test" for="my_items">subject</div>

if the items is:

var items=[{value:'sub'},{vallue:'math'}];

the html will be:

<div id="test_sub"></div><div id="test_math"></div>

when items change I can edit it with the document.getElementById.

and set the outerHTML.
if the items is:

var items=[];

there will no html;
how to update them when there is some items initems again? there is nothing.

you may say I can create a tree to update it .but I wonder if I can do it by not create a tree.

so I am asking if I can create <!-- id="test" --> and when changed I can update the <!-- --> outerHTML?

Tags:

2

Answers


  1. 0

    but in vue you need not add class to hide or display

    If you are using Vue.js, there are more declarative ways to conditionally render elements, and these ways are often more concise and expressive compared to directly manipulating the DOM using plain JavaScript.
    Vue.js provides directives like v-if, v-else, v-show, and others, which can be used to conditionally render elements based on the state of the component or application.

    Something like:

    <template>
  <div>
    <!-- Container for the items -->
    <div v-if="items.length > 0">
      <!-- Iterate over each item in the items array -->
      <template v-for="item in items">
        <div :key="item.value" :id="'test_' + item.value"></div>
      </template>
    </div>
    
    <!-- Render this div if the items array is empty -->
    <div id="test" v-else></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [{ value: 'sub' }, { value: 'math' }]
    };
  }
};
</script>

    In Vue.js, when the data properties of a component change, the component re-renders the parts of the template that are dependent on those properties. So, if the items array changes, the component will automatically update the DOM to reflect those changes.

    For instance, you can add items with a button:

    <script>
export default {
  data() {
    return {
      items: [] // Initially, the items array is empty
    };
  },
  methods: {
    addItem() {
      // Add an item to the items array
      this.items.push({ value: 'newItem' });
    }
  }
};
</script>
    Login or Signup to reply.
  2. 0

    It is not possible to directly insert items into a comment in HTML using standard DOM methods. Comments are not considered part of the Document Object Model (DOM) tree in the same way that HTML elements are, therefore they cannot be selected or manipulated using the usual DOM methods.

    Instead, you can use comments as a visual marker in the HTML code to indicate the desired location for adding elements.

    Here is an example of how you can use JavaScript to dynamically manipulate the DOM based on an array of data:

    var items = [{value:'sub'}, {value:'math'}]; // Initial items

// Function to update DOM
function updateDOM() {
  // Get all child nodes (including comments) of the body
  var allNodes = Array.from(document.body.childNodes);
  
  // Find the comment node
  var commentNode = allNodes.find(node => node.nodeType === 8 && node.data.trim() === 'id="test"');
  
  // Remove all existing divs for items
  allNodes.forEach(node => {
    if (node.nodeType === 1 && node.id.startsWith('test_')) {
      document.body.removeChild(node);
    }
  });
  
  // Add elements for new items
  items.forEach(function(item, index) {
    var div = document.createElement('div');
    div.id = 'test_' + item.value;
    div.textContent = item.value; // To visually see the div
    document.body.insertBefore(div, commentNode);
  });
}

// Initial DOM update
updateDOM();

// Add event listeners to buttons for manipulating items array
document.getElementById('addItem').addEventListener('click', function() {
  var newItem = {value: 'item' + (items.length + 1)}; // Create new item
  items.push(newItem); // Add new item to items array
  updateDOM(); // Update DOM
});

document.getElementById('removeItem').addEventListener('click', function() {
  items.pop(); // Remove last item from items array
  updateDOM(); // Update DOM
});
    <div id="test"></div>
<button id="addItem">Add Item</button>
<button id="removeItem">Remove Item</button>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search