Question

刚开始学习JavaScript，下面写了简单的代码来打印文本并在浏览器中测试它。

输出是：

这是来自javascript函数......

这是我的测试标题

但是我试图改变正在打印的句子的顺序（交换打印的两个句子）：

这是我的测试标题

这是来自javascript函数......

以下代码需要进行哪些更改才能打印按上述顺序打印的文本。

<!DOCTYPE html>
<html>

<body>

<p id="demo">This is a paragraph.</p>
<p id = "demo1">This is demo1.</p>

</body>

<script>
//document.write("<h3>This is my test heading</h3>");
document.getElementById("demo1").innerHTML="This is my test heading";
</script>

<script>

//alert("My First JavaScript");

displaytext();

function displaytext()
{

    document.getElementById("demo").innerHTML="This is from a javascript function...";

}

</script>

</html>

Answer 1

在HTML中，JavaScript函数的顺序与放置HTML元素的顺序无关。

http://jsfiddle.net/3CpU7/

以上小提琴有你的答案：你必须切换DIV。

<p id = "demo1">This is demo1.</p>
<p id="demo">This is a paragraph.</p>

另外，请记住 - 您可以使用CSS创建DIV所需的任何行为（例如浮动，清除，位置等）

修改

另一个显而易见的方法是，如果您不想更改HTML标记，则将DIV的内容交换为：（另一个小提琴：http://jsfiddle.net/3CpU7/1/）

document.getElementById("demo").innerHTML="This is my test heading"; displaytext(); function displaytext() { document.getElementById("demo1").innerHTML="This is from a javascript function..."; }

希望它有助于您的初步学习。：）

Answer 2

切换HTML元素的id。正如函数名称所暗示的那样，getElementById函数会获取具有给定id的HTML元素（如果存在，则为null）。

此

document.getElementById("demo1")

指的是

<p id="demo1">This is a paragraph.</p>

和

document.getElementById("demo")

指的是

<p id="demo">This is demo1.</p>

由于HTML中的元素按顺序

<p id="demo1">This is a paragraph.</p>
<p id="demo">This is demo1.</p>

您必须定位demo1才能更改第一个demo以更改第二段的内部HTML。

因此，要么改变JS函数调用中的id，要么改变HTML。

参考：https://developer.mozilla.org/en-US/docs/Web/API/document.getElementById

Javascript文本打印顺序

2 个答案: