Question

所以，我有以下HTML代码：

<!DOCTYPE html>
<html>
<head>
    <link type="text/javascript" href="FileContainingJS">
</head>
<body>
    <p id="Stuff"></p>
</body>
</html>

以下JS代码：

function HelloWorld() {
    return "Hello World";
}

我希望HelloWorld函数的结果进入p标签（产生一个带有“Hello World”的段落。任何帮助都会非常感激:) 附：忽略次要的语法错误，因为我正在冲xD

Answer 1

您可以通过执行以下操作来实现此目的：

function HelloWorld() {
  document.getElementById('Stuff').innerHTML = 'Hello World';
}

Answer 2

这称为DOM操作。插入文本“Hello World”（或任何文本）的最简单方法是使用.innerHTML

var result = HelloWorld();
document.getElementById("Stuff").innerHTML = result;

Answer 3

这被称为DOM操作 - 正如其他人所提到的那样。你做的是，你采用一个JavaScript对象代表HTML文档中的一个元素，然后修改一个属性或调用一个方法来操作它。

在这里，您想要更改其中的文本。 innerHTML属性允许您将p标记内的HTML设置为您想要的任何内容。这是你的第一选择。

您的第二个选择是使用textContent属性，现在它的作用类似于innerHTML属性，但它避免了XSS攻击等问题：您无法使用此属性注入HTML。 / p>

由于上述安全优势，我建议使用第二种选择。

现在，让我们找到获取代表段落元素的对象的方法。你这样做的方法是获取一个现有的对象，代表整个文档，然后使用方法选择它的子项。

此预先存在的对象（内置于JavaScript中）为document。现在，要获取具有特定ID的元素，可以调用其getElementById(id)方法。这就是我推荐的方法。

获取段落对象的其他方法可能是getElementByQuerySelector(cssSelector)，这需要一个CSS选择器（在本例中为#stuff。

所以，我们的最终解决方案是：

document // our whole document
        .getElementById("Stuff") // just our paragraph
                                .textContent // what's inside it
                                             = helloWorld() // result of funct.

在一行中，这看起来像

document.getElementById("Stuff").textContent = helloWorld();

还有一个注释：

以大写字母开始您的身份证是不寻常的。在JavaScript中，人们通常使用camelCase编写，其中第一个单词以小写字母开头，后面的任何单词都以大写字母开头（例如iLikeToEatCows）。拥有这种一致性允许程序员听到＆＃34;好的，所以ID是myparagraph＆＃34;并且能够非常确定地写出myParagraph。但当然，这是可选的。

如何将JS函数的输出放入HTML中的p标记中

3 个答案: