I want to append my html from javascript without jQuery

Question

.appendChild is not working for me, all I want to do is append the html code in my javascript const bottomText to the DOM without jQuery

   const bottomText = `
        <div class="bottom-text row">
          <div class="column column-left">test
            <p>xx%<span></span></p>
          </div>
          <div class="column column-right">
          <p>test</p>
          </div>
        </div>
        <hr>
        `;
document.getElementById("piechart").appendChild(bottomText);

And my html

<body>
    <div class="graphs">
        <div class="pie-chart" id="piechart">
        </div>
        <script src="./js/pie.js"></script>
        <script src="./js/linegraph.js"></script>
    </div>
</body>

Why does it not work? with jquery it works but for this project they want me to only use vanilla js

You mean, like document.getElementById('targetDivId').innerHTML += 'myHTMLString'? — Yevhen Horbunkov
– Yevhen Horbunkov, Commented Apr 22, 2019 at 13:39

arieljuod · Accepted Answer · 2019-04-22 13:54:17Z

7

appentChild() takes a Node as a parameter. If you want to add string containing you can use insertAdjacentHTML()

document.getElementById("piechart").insertAdjacentHTML("beforeend",bottomText);

MDN Docs: https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML

edited Apr 22, 2019 at 13:54

arieljuod

15.9k2 gold badges27 silver badges37 bronze badges

answered Apr 22, 2019 at 13:28

Maheer Ali

36.5k8 gold badges53 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

arieljuod Over a year ago

This is the proper solution. I would add the docs for completeness and to understend the first argument developer.mozilla.org/en-US/docs/Web/API/Element/…

Maheer Ali Over a year ago

@arieljuod If you want to edit the answer you are welcome

Mark Minerov · Accepted Answer · 2019-04-22 13:32:03Z

0

To use .appendChild() for first you should create an element:

let element = document.createElement("div");
    document.body.appendChild(element);

answered Apr 22, 2019 at 13:32

Mark Minerov

3061 silver badge11 bronze badges

2 Comments

Yevhen Horbunkov Over a year ago

For the record, I didn't downvote, but I may assume, there could be two reasons for that - your code simply creates empty <div> and appends that to the end of the target node (body in this case) and NOT inserts custom HTML. Second, could be, manipulating DOM in such a way could be way slower than appending HTML code directly with insertAdjacentHTML() as suggested by another answer. Which, by the way, I'm guessing, is the reason why insertBefore() answer didn't get that much upvotes.

Mark Minerov Over a year ago

element.innerHTML = "some text"; Put any html code with insertAdjacentHTML() is bad practice.

Daut · Accepted Answer · 2019-04-22 13:38:53Z

0

You can use .insertBefore()

There is no insertAfter() method. It can be emulated by combining the insertBefore method with Node.nextSibling.

function myFunction() {
  var node = document.createElement('li');

  node.innerHTML = '<strong>Water</strong>'

  var list = document.getElementById("myList1");
  list.insertBefore(node, list.childNodes[0]);
}

<ul id="myList1">
  <li>Coffee</li>
  <li>Tea</li>
</ul>

<p>Click the button to move an item from one list to another</p>

<button onclick="myFunction()">Try it</button>

answered Apr 22, 2019 at 13:38

Daut

2,6851 gold badge23 silver badges33 bronze badges

Collectives™ on Stack Overflow

I want to append my html from javascript without jQuery

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related