Question

我正在使用javascript在html代码页上现有段落的正下方添加一个新段落。新段落没有遵循与第一段相同的CSS。这是源代码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

您的代码将新的添加到现有内的中。这意味着相对于容器的左边缘CSS规则适用于第二条规则，容器的左边缘也很大。

为防止这种情况，可以将新的添加到包含现有的元素中。

将添加为另一个的子代还是很不自然的。浏览器可以让您以自己喜欢的任何方式来操作DOM，但是HTML解析器不会这样做。根据HTML规则，不能包含阻止内容。

Answer 2

p元素的某些值设置为 margin-left 。由于您要将新创建的p追加到另一个p，因此此p再次采用默认的 margin-left 设置。

要解决此问题，可以将新创建的段落的 marginLeft 属性设置为0。

para.style.marginLeft = '0px';


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

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

2 个答案: