使用createElement将新段落添加到现有段落并保持相同的CSS

Question

I am using javascript to add a new paragraph just below the existing paragraph on the html code page. The new paragraph is not following the same css as the first one. here is a link to the source code http://students.cpcc.edu/~lplumme2/web115/swtl/seventh10chaptersexamples.html

 function seventh10() { alert("let's start the javascipt"); var para = document.createElement("p"); var t = document.createTextNode("We have different ways of teaching you. Our office location is designed to look like a student lab.We can work with you one on one there or you can meet you somewhere else or we can even come to your house"); para.appendChild(t); document.getElementById("myBlog").appendChild(para); } seventh10(); 

 <p id="myBlog"> We have a variety of subjects and software that we can help you<br> improve your skills on. We teach from brand new levels to just helping<br> build on what you already know.<br> </p> 

Answer 1

Your code adds the new <p> inside the existing <p> . That means that the left margin CSS rule applies for the second one with respect to the container <p> that's also got a big left margin.

To prevent that, you can add the new <p> to the element that contains the existing <p> .

Adding a <p> as a child of another <p> is kind-of unnatural anyway. The browser will let you manipulate the DOM pretty much any way you like, but the HTML parser won't do that. A <p> can't contain block content under HTML rules.

Answer 2

The p element has some value set as margin-left . Since you are appending the the newly created p to another p , this p again taking the default margin-left set.

To fix the issue, you can set the marginLeft property to 0 for the newly created paragraph.

para.style.marginLeft = '0px';


function seventh10() {
  ....
  para.style.marginLeft = '0px';
  para.appendChild(t);
  ....