Search code examples
javascripthtmldomappendchildcreateelement

Pass 'div' element as parameter to JavaScript function


I need to create, decorate and append child 'divs' to existing. For example, after the appendChildren is executed, following divs

    <div id="a">
      <div id="b">
      </div>
    </div>

should take the following form (assuming decorateDiv adds text "This is new div" inside new div)

    <div id="a">
      <div id="b">
        <div>"This is new div"</div>
      </div>
      <div>"This is new div"</div>
    </div>

Here is my code

    function appendChildren() {
    var allDivs = document.getElementsByTagName("div");
    for (var i = 0; i < allDivs.length; i++) {
    var newDiv = document.createElement("div");
    decorateDiv(newDiv);
    allDivs[i].appendChild(newDiv);
    }
    }


    function decorateDiv(div) {
      var x = document.getElementByTagName("div");
      var t = document.createTextNode("This is new div");  
    x.appendChild(t); 
    }

I am completely new to JavaSpript. What am I doing wrong? Please help me to fix bugs


Solution

  • You're not using the parameter div and the decorateDiv should look like this:

    function decorateDiv(div) {
       //div is the object element
       var t = document.createTextNode("This is new div");  
       div.appendChild(t); 
    }