CODEWITHSUNDEEP
javascript
Venkat
Venkat

Reputation: 2196

convert string to a Node element in javascript

This is my HTML code.

 <div id="ulgallery">
    <ul class="row">
      <li> some item1 </li>
      <li> some item1 </li>
      <li> some item1</li>
    </ul>
    <ul class="row">
      <li> some item2 </li>
      <li> some item2 </li>
      <li> some item2 </li>
    </ul>
  </div>

I have a background ajax program which fetches more 

 <ul> ...</ul> <ul> ...... </ul>

data as string. I have a problem in appending this data after the last element.

the final code should look like:

 <div id="ulgallery">
    <ul class="row">
      <li> some item1 </li>
      <li> some item1 </li>
      <li> some item1</li>
    </ul>
    <ul class="row">
      <li> some item2 </li>
      <li> some item2 </li>
      <li> some item2 </li>
    </ul>
   <ul class="row">
      <li> some item3 </li>
      <li> some item3 </li>
      <li> some item3 </li>
    </ul>
   <ul class="row">
      <li> some item4 </li>
      <li> some item4 </li>
      <li> some item4 </li>
    </ul>
  </div>

That is calling the background program gets more data which should append to that last item of . I am not sure how to convert string to node

   document.getElementById("ulgallery").appendChild(node);

Upvotes: 0

Views: 1261

Answers (1)

Md. Arafat Al Mahmud
Md. Arafat Al Mahmud

Reputation: 3214

Set the fetched string as the innerHTML of a dummy div element. Then get the childNodes of the dummy div. This will do the trick. It will convert the string as an array of DOM nodes. Then just iterate through the list and append the nodes to the parent.

Pseudocode: 

        var temp = document.createElement('div');
        temp.innerHTML = child; // child is the fetched string from ajax call in your case
        child = temp.childNodes;
        for(var i=0; i<child.length ; i++){
           parent.appendChild(child[i]); 
        }

Upvotes: 1

Related Questions