Adding content into an element in html using javascript

Question

I want to create a paragraph element and add content to it. Basically i want to let the textContent of a paragraph element be a string.

What i have tried doing is:

var st="Hello";
con=document.getElementById("content");
var pv=document.createElement("p");
con.appendchild(pv);
pv.setAttribute("",st);

<span id="content"> </span>

What attribute should i use to add in the setAttribute function here? I tried using textContent but it's not an attribute. Any other way i can do this?

User pv.innerHTML = st; isntead of setAttribute.

Ed T.
– Ed T.

2019-11-18 09:32:02 +00:00
Commented Nov 18, 2019 at 9:32 — Ed T.
– Ed T., Commented Nov 18, 2019 at 9:32

prasanth · Accepted Answer · 2019-11-18 09:32:36Z

4

You could do with elem.innerText instead of setAttribute

var st = "Hello";
var con = document.getElementById("content");
var pv = document.createElement("p");
con.appendChild(pv);
pv.innerText= st;

<span id="content"> </span>

answered Nov 18, 2019 at 9:32

prasanth

22.6k4 gold badges33 silver badges57 bronze badges

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

Comments

Sylens · Accepted Answer · 2019-11-18 09:33:23Z

0

You should use innerText to do this.

pv.innerText = "hello"

You can set and get the text value of an element using innerText.

More info on innerText can be found here: https://www.w3schools.com/jsref/prop_node_innertext.asp

answered Nov 18, 2019 at 9:33

Sylens

1,1778 silver badges31 bronze badges

Comments

phwt · Accepted Answer · 2019-11-18 09:50:56Z

You can also use innerHTML which can change not just the text but also the HTML.

let con_txt = document.getElementById("content_text");
let pv_txt = document.createElement("p");
con_txt.appendChild(pv_txt);
pv_txt.innerText = "From innerText";

let con_html = document.getElementById("content_html");
let pv_html = document.createElement("p");
con_html.appendChild(pv_html);
pv_html.innerHTML = "<b>innerHTML also works!</b>"; //You can use HTML tags here

<span id="content_text"></span>
<span id="content_html"></span>

Above result in HTML

<span id="content_text">
    <p>From innerText</p>
</span>
<span id="content_html">
    <p><b>innerHTML also works!</b></p>
</span>

More info about innerHTML

Collectives™ on Stack Overflow

Adding content into an element in html using javascript

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related