如何显示新创建元素的innerHtml内容

Question

        function Eval(a){
         var element= document.createElement('p');   // Creating a paragraph  
         $(element).addClass("output-class");
         element.innerHTML+= a; }

The contents added are not displayed even after styling "output-class" dynamically or even within tag. But if I write console.log(element) then I get the required result but not on the webpage.

Answer 1

You almost there, three main considerations:

• You don't need jQuery to add a classname, use classList instead.
• You don't need to use this statement element.innerHTML += a; because this is a newly created element, so the innerHTML attribute is empty. Use this element.innerHTML = a; instead
• To make that element visible/rendered, you need to add it to a parent element. To accomplish that, use the function appendChild .

In this example, the parent is the body element.

 function Eval(a, parent) { var element = document.createElement('p'); // Creating a paragraph element.classList.add("output-class"); element.innerHTML = a; parent.appendChild(element); } Eval('Ele from SO', document.body) 

 .output-class { font-size: 24px }