原生JavaScript可以通过多种方式显示内容，例如使用innerHTML、document.write、alert等。其中，innerHTML 是最常用的方法之一，因为它可以动态地更新网页的内容。以下详细介绍如何使用innerHTML来显示内容。
使用innerHTML显示内容
innerHTML 是一个JavaScript属性，它允许开发者通过JavaScript代码动态地更改HTML元素的内容。通过获取目标HTML元素的引用，并设置其innerHTML属性，可以轻松地在网页上显示或更新内容。
document.getElementById("myElement").innerHTML = "Hello, World!";
在上述代码中，getElementById方法用于获取id为myElement的HTML元素，并将其innerHTML属性设置为Hello, World!。这样，页面上id为myElement的元素内容就会被更新为Hello, World!。
一、使用innerHTML显示动态内容
innerHTML属性可以用于动态地显示或更新网页上的内容。以下是一些常见的应用场景和示例代码。
1. 在页面加载时显示内容
在页面加载时，可以通过JavaScript设置元素的innerHTML属性来显示内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Display Content with innerHTML</title>
<script>
function displayContent() {
document.getElementById("content").innerHTML = "Welcome to my website!";
}
</script>
</head>
<body onload="displayContent()">
<div id="content"></div>
</body>
</html>
上述代码在页面加载时调用displayContent函数，并将id为content的元素的内容设置为Welcome to my website!。
2. 通过按钮点击事件显示内容
通过按钮点击事件，可以使用innerHTML属性来更新元素的内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Display Content with Button</title>
<script>
function showMessage() {
document.getElementById("message").innerHTML = "Button Clicked!";
}
</script>
</head>
<body>
<button onclick="showMessage()">Click Me</button>
<div id="message"></div>
</body>
</html>
点击按钮时，showMessage函数会被调用，并将id为message的元素的内容更新为Button Clicked!。
二、使用document.write显示内容
document.write方法可以将指定的内容直接写入HTML文档中。这种方法通常用于调试，或者在页面加载时显示静态内容。
1. 在页面加载时使用document.write
在页面加载时，可以使用document.write方法直接写入内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Display Content with document.write</title>
<script>
document.write("Hello, this content is displayed using document.write!");
</script>
</head>
<body>
</body>
</html>
上述代码会在页面加载时直接在文档中写入Hello, this content is displayed using document.write!。
2. 动态使用document.write
虽然document.write在页面加载之后不常被使用，但在某些特殊情况下可以动态地使用它。例如，向页面中添加脚本标签。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dynamic Script Loading</title>
<script>
function loadScript() {
document.write('<script src="path/to/your/script.js"></script>');
}
</script>
</head>
<body>
<button onclick="loadScript()">Load Script</button>
</body>
</html>
点击按钮时，loadScript函数会向文档中动态添加一个脚本标签。
三、使用alert显示内容
alert方法用于显示警告框，通常用于调试或向用户显示重要信息。
1. 页面加载时显示警告框
在页面加载时，可以通过JavaScript代码触发alert方法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Alert Example</title>
<script>
alert("Welcome to the website!");
</script>
</head>
<body>
</body>
</html>
上述代码会在页面加载时显示一个警告框，内容为Welcome to the website!。
2. 通过按钮点击事件显示警告框
通过按钮点击事件，可以使用alert方法向用户显示信息。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Alert on Button Click</title>
<script>
function showAlert() {
alert("Button clicked!");
}
</script>
</head>
<body>
<button onclick="showAlert()">Click Me</button>
</body>
</html>
点击按钮时，showAlert函数会被调用，并显示一个警告框，内容为Button clicked!。
四、使用console.log显示内容
console.log方法用于在浏览器的控制台中输出信息，通常用于调试目的。
1. 页面加载时使用console.log
在页面加载时，可以通过JavaScript代码使用console.log方法输出调试信息。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Console Log Example</title>
<script>
console.log("Page loaded successfully!");
</script>
</head>
<body>
</body>
</html>
上述代码会在页面加载时在控制台中输出Page loaded successfully!。
2. 通过函数调用使用console.log
通过函数调用，可以使用console.log方法输出动态信息。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Console Log on Button Click</title>
<script>
function logMessage() {
console.log("Button was clicked!");
}
</script>
</head>
<body>
<button onclick="logMessage()">Click Me</button>
</body>
</html>
点击按钮时，logMessage函数会被调用，并在控制台中输出Button was clicked!。
五、使用appendChild显示内容
appendChild方法用于向指定的父元素添加新的子元素，这样可以动态地向页面添加内容。
1. 动态添加文本节点
通过JavaScript代码，可以使用appendChild方法向页面动态添加文本节点。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Append Child Example</title>
<script>
function addTextNode() {
var newText = document.createTextNode("This is a new text node.");
document.getElementById("container").appendChild(newText);
}
</script>
</head>
<body>
<button onclick="addTextNode()">Add Text Node</button>
<div id="container"></div>
</body>
</html>
点击按钮时，addTextNode函数会被调用，并向id为container的元素中添加一个新的文本节点。
2. 动态添加元素节点
通过JavaScript代码，可以使用appendChild方法向页面动态添加元素节点。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Append Element Example</title>
<script>
function addElement() {
var newDiv = document.createElement("div");
newDiv.innerHTML = "This is a new div element.";
document.getElementById("container").appendChild(newDiv);
}
</script>
</head>
<body>
<button onclick="addElement()">Add Element</button>
<div id="container"></div>
</body>
</html>
点击按钮时，addElement函数会被调用，并向id为container的元素中添加一个新的div元素。
六、使用textContent显示内容
textContent属性用于设置或获取元素的文本内容，它与innerHTML类似，但不会解析HTML标签。
1. 设置元素的文本内容
通过JavaScript代码，可以使用textContent属性设置元素的文本内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Text Content Example</title>
<script>
function setTextContent() {
document.getElementById("textContainer").textContent = "This is the new text content.";
}
</script>
</head>
<body>
<button onclick="setTextContent()">Set Text Content</button>
<div id="textContainer"></div>
</body>
</html>
点击按钮时，setTextContent函数会被调用，并将id为textContainer的元素的文本内容设置为This is the new text content.。
2. 获取元素的文本内容
通过JavaScript代码，可以使用textContent属性获取元素的文本内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Get Text Content Example</title>
<script>
function getTextContent() {
var content = document.getElementById("textContainer").textContent;
alert("The text content is: " + content);
}
</script>
</head>
<body>
<div id="textContainer">This is some text content.</div>
<button onclick="getTextContent()">Get Text Content</button>
</body>
</html>
点击按钮时，getTextContent函数会被调用，并获取id为textContainer的元素的文本内容，然后通过alert方法显示。
七、使用innerText显示内容
innerText属性用于设置或获取元素的纯文本内容，它与textContent类似，但会解析HTML标签并保留格式。
1. 设置元素的纯文本内容
通过JavaScript代码，可以使用innerText属性设置元素的纯文本内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Inner Text Example</title>
<script>
function setInnerText() {
document.getElementById("textContainer").innerText = "This is the new inner text content.";
}
</script>
</head>
<body>
<button onclick="setInnerText()">Set Inner Text</button>
<div id="textContainer"></div>
</body>
</html>
点击按钮时，setInnerText函数会被调用，并将id为textContainer的元素的纯文本内容设置为This is the new inner text content.。
2. 获取元素的纯文本内容
通过JavaScript代码，可以使用innerText属性获取元素的纯文本内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Get Inner Text Example</title>
<script>
function getInnerText() {
var content = document.getElementById("textContainer").innerText;
alert("The inner text content is: " + content);
}
</script>
</head>
<body>
<div id="textContainer">This is some inner text content.</div>
<button onclick="getInnerText()">Get Inner Text</button>
</body>
</html>
点击按钮时，getInnerText函数会被调用，并获取id为textContainer的元素的纯文本内容，然后通过alert方法显示。
八、使用value属性显示内容
value属性通常用于表单元素，如输入框、文本区域、选择框等，用于设置或获取其值。
1. 设置输入框的值
通过JavaScript代码，可以使用value属性设置输入框的值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Set Input Value Example</title>
<script>
function setInputValue() {
document.getElementById("myInput").value = "This is the new input value.";
}
</script>
</head>
<body>
<input type="text" id="myInput">
<button onclick="setInputValue()">Set Input Value</button>
</body>
</html>
点击按钮时，setInputValue函数会被调用，并将id为myInput的输入框的值设置为This is the new input value.。
2. 获取输入框的值
通过JavaScript代码，可以使用value属性获取输入框的值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Get Input Value Example</title>
<script>
function getInputValue() {
var value = document.getElementById("myInput").value;
alert("The input value is: " + value);
}
</script>
</head>
<body>
<input type="text" id="myInput" value="This is the initial input value.">
<button onclick="getInputValue()">Get Input Value</button>
</body>
</html>
点击按钮时，getInputValue函数会被调用，并获取id为myInput的输入框的值，然后通过alert方法显示。
九、使用outerHTML显示内容
outerHTML属性用于设置或获取元素的HTML内容，包括元素本身。
1. 设置元素的HTML内容
通过JavaScript代码，可以使用outerHTML属性设置元素的HTML内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Outer HTML Example</title>
<script>
function setOuterHTML() {
document.getElementById("myElement").outerHTML = '<div id="myElement">This is the new outer HTML content.</div>';
}
</script>
</head>
<body>
<div id="myElement">This is the initial outer HTML content.</div>
<button onclick="setOuterHTML()">Set Outer HTML</button>
</body>
</html>
点击按钮时，setOuterHTML函数会被调用，并将id为myElement的元素的HTML内容设置为新的内容。
2. 获取元素的HTML内容
通过JavaScript代码，可以使用outerHTML属性获取元素的HTML内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Get Outer HTML Example</title>
<script>
function getOuterHTML() {
var html = document.getElementById("myElement").outerHTML;
alert("The outer HTML content is: " + html);
}
</script>
</head>
<body>
<div id="myElement">This is the outer HTML content.</div>
<button onclick="getOuterHTML()">Get Outer HTML</button>
</body>
</html>
点击按钮时，getOuterHTML函数会被调用，并获取id为myElement的元素的HTML内容，然后通过alert方法显示。
十、使用模板字符串显示内容
模板字符串（Template literals）是一种新的字符串字面量，用于多行字符串和嵌入表达式。
1. 使用模板字符串显示内容
通过JavaScript代码，可以使用模板字符串动态生成内容并显示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Template String Example</title>
<script>
function showTemplateString() {
const name = "John";
const age = 30;
const content = `Hello, my name is ${name} and I am ${age} years old.`;
document.getElementById("templateContainer").innerHTML = content;
}
</script>
</head>
<body>
<button onclick="showTemplateString()">Show Template String</button>
<div id="templateContainer"></div>
</body>
</html>
点击按钮时，showTemplateString函数会被调用，并将模板字符串生成的内容显示在id为templateContainer的元素中。
2. 多行字符串显示内容
模板字符串支持多行字符串，可以用于显示多行内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Multi-line Template String Example</title>
<script>
function showMultiLineString() {
const content = `This is a multi-line
template string.`;
document.getElementById("multiLineContainer").innerHTML = content;
}
</script>
</head>
<body>
<button onclick="showMultiLineString()">Show Multi-line String</button>
<div id="multiLineContainer"></div>
</body>
</html>
点击按钮时，showMultiLineString函数会被调用，并将多行字符串的内容显示在id为multiLineContainer的元素中。
通过上述方法，开发者可以使用原生JavaScript在网页上显示各种内容，包括文本、HTML、警告框等。选择适合的方法不仅能提高代码的可读性和维护性，还能提升用户体验。
相关问答FAQs：
1. 如何使用原生JS显示文本内容？
使用原生JS显示文本内容非常简单。您可以通过以下步骤来实现：
步骤一：在HTML文件中创建一个用于显示内容的标签，比如 <div> 或 <p>。
步骤二：使用JavaScript获取对应的标签元素，可以通过 document.getElementById()、document.getElementsByClassName() 或 document.querySelector() 等方法来获取。
步骤三：通过JS操作标签元素的 innerText 或 innerHTML 属性来设置要显示的文本内容。
示例代码：
<div id="myDiv"></div>
<script>
var myElement = document.getElementById("myDiv");
myElement.innerText = "这是要显示的文本内容";
</script>
2. 如何在网页中使用原生JS显示图片？
若要使用原生JS在网页中显示图片，您可以按照以下步骤进行操作：
步骤一：在HTML文件中创建一个用于显示图片的标签，比如 <img>。
步骤二：使用JavaScript获取对应的标签元素，可以通过 document.getElementById()、document.getElementsByClassName() 或 document.querySelector() 等方法来获取。
步骤三：通过JS操作标签元素的 src 属性来设置图片的路径。
示例代码：
<img id="myImage">
<script>
var myImage = document.getElementById("myImage");
myImage.src = "路径/图片名称.jpg";
</script>
3. 如何使用原生JS显示隐藏一个元素？
如果您想使用原生JS来显示或隐藏一个元素，可以按照以下步骤进行操作：
步骤一：使用JavaScript获取要操作的元素，可以通过 document.getElementById()、document.getElementsByClassName() 或 document.querySelector() 等方法来获取。
步骤二：通过JS操作元素的 style.display 属性来设置元素的显示或隐藏。
示例代码：
<button id="myButton">点击显示/隐藏</button>
<div id="myElement">这是要显示/隐藏的元素</div>
<script>
var myButton = document.getElementById("myButton");
var myElement = document.getElementById("myElement");
myButton.addEventListener("click", function() {
if (myElement.style.display === "none") {
myElement.style.display = "block";
} else {
myElement.style.display = "none";
}
});
</script>
希望以上回答能够解决您的问题，如果还有其他疑问，请随时提问。
文章包含AI辅助创作，作者：Edit2，如若转载，请注明出处：https://docs.pingcode.com/baike/3509584
