Basic Help On inserting arrays in javascript into paragraph element in HTML

Question

I have this simple html:

<h3 id='target'>
   <p> <!--insert javascript joined array here ---> </p>
</h3>

And this simple Javascript:

var letters = ["a", "b", "c", "d"];

var joinedLetters = letters.join(", and ");

var getElement = document.getElementById("target").firstElementChild;

getElement.innerHTML = joinedLetters;

PROBLEM:

It comes out formatted in h3 (text bold) and not p. My object is to insert the joined array in the paragraph element. I don't know if it's possible. Any help/explanation is appreciated. Thanks!

UPDATE:

I usually catch that mistake, but I guess not that time. Thanks all! I made all the necessary changes:

<h3>Joined</h3>
<p id='target'><!--insert joined array here--></p>

And the JS (not including the array JS above). This seems to be the outcome I wanted:

var getElement = document.getElementById("target").innerHTML;
document.write(getElement = joinedLetters);

CURIOUS:

How come if I write the code above like this, a duplicate of the array will appear?:

var getElement = document.getElementById("target");
document.write(getElement.innerHTML = joinedLetters);

And, it seems that the inserted array is not editable by CSS (all links established):

p {color: red}

I'm thinking it has something to do with the document.write function. Thanks once again! Great help, great help! :)

FINAL ANSWER:

var getElement = document.getElementById("target");
getElement.innerHTML = joinedLetters;

This house is clean.

your JS is fine, but the the P inherits its look from the H3, making it not look like other P tags. — dandavis
– dandavis, Commented Sep 10, 2014 at 0:19
To format code in Stack Overflow, just indent by four spaces. It took me a second to figure out what <code> was doing there. :) — Amadan
– Amadan, Commented Sep 10, 2014 at 0:29
Why have you got a <p> in an <h3> in the first place? It makes no semantic sense. Why not move the <p> out of the <h3> give it its own id and target that? — Jon P
– Jon P, Commented Sep 10, 2014 at 0:36
The duplicate appears because you are writing it twice. Once using innerHTML, and another using the older method (document.write, which by the way you should not be using anymore in our modern day). document.write is not writing to a specific element such as the p tag, but simply plopping the text onto the page in the same place the script tag is located. You can use Inspector (right-click>inspect element) to view the page's current source and investigate for yourself. — tomysshadow
– tomysshadow, Commented Sep 10, 2014 at 3:30
@tomysshadow Thanks much! I fixed it. I use Komodo Edit. I don't think it does console.log function. Also learning from an relatively older book. Thanks again! — James
– James, Commented Sep 10, 2014 at 4:43

davidcondrey · Accepted Answer · 2014-09-10 00:20:40Z

2

The paragraph is bold because it's wrapped in an H3 tag. Either get rid of the H3 tag or write some CSS like

h3#target > p { font-weight:400; }

Not sure if you were trying to retain the quotes in your output but you can do that as well like this..

var joinedLetters = "'" + letters.join("','") + "'";

// 'a','b','c','d'

answered Sep 10, 2014 at 0:20

davidcondrey

36.3k18 gold badges119 silver badges138 bronze badges

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

Comments

gffbss · Accepted Answer · 2014-09-10 00:24:30Z

1

As dandavis said, your p tag is wrapped in an h3 tag, meaning that that specific p tag will inherit the styling elements of it's parent tag in this case the h3. You can add the id 'target' to the p tag and remove the h3 as well as the firstElementChild in your document.get.

answered Sep 10, 2014 at 0:24

gffbss

1,7011 gold badge17 silver badges19 bronze badges

Collectives™ on Stack Overflow

Basic Help On inserting arrays in javascript into paragraph element in HTML

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related