如何使用 JavaScript 创建换行符？

要使用JavaScript创建换行符，我们将了解三种不同的方法。

在这篇文章中，我们有一些文本内容，我们的任务是使用 Javascript 创建换行符。我们将使用<br>标签、\n和insertAdjacentHTML()方法以及块级元素，并对每个方法进行解释和示例代码。

使用 JavaScript 创建换行符的方法

使用 br 标签创建换行符

在这种使用 javascript 创建换行符的方法中，我们将使用br标签。我们使用了HTML DOM document write() 方法来编写一些句子，并使用 br 标签进行换行。

示例

这是一个使用 br 标签创建换行符的示例

<html>
<head>
    <title>
        Create a line break with JavaScript
    </title>
</head>
<body>
    <h3>
        Creating a line break with JavaScript
    </h3>
    <h4>
        Line break using br tag
    </h4>
    <script>
        document.write("Hello World!");
        document.write("<br>");
        document.write("Demo<br>Text!");
    </script>
</body>
</html>

使用换行符创建换行符

在这种方法中，我们使用了换行符(\n)来换行。我们使用了getElementById()方法获取 para 元素，并使用innerText属性显示文本内容。

示例

这是一个使用 \n 创建换行符的示例

<html>
<head>
    <title>
        Create a line break with JavaScript
    </title>
</head>
<body>
    <h3>
        Creating a line break with JavaScript
    </h3>
    <h4>Line-break using '\n'</h4>
    <p id="para"></p>
    <script>
        document.getElementById("para")
            .innerText = "I am Tutorials \n I am Point";
    </script>
</body>
</html>

使用 insertAdjacentHTML() 方法创建换行符

在这种方法中，我们使用了insertAdjacentHTML()方法与块级元素一起创建换行符。此方法仅在使用块级元素时才会换行。这里我们使用了 div 标签来显示文本内容，但也可以使用其他块级元素。

示例

这是一个使用 insertAdjacentHTML() 方法创建换行符的示例

<html>
<head>
    <title>
        Create a line break with JavaScript
    </title>
</head>
<body>
    <h3>
        Creating a line break with JavaScript
    </h3>
    <h4>
        Line-break using 'insertAdjacentHTML'
    </h4>
    <div id="container2">This is a paragraph.</div>
    <script>
        document.getElementById('container2')
            .insertAdjacentHTML('beforeend', 
            '<div>This is a new paragraph.</div>');
    </script>
</body>
</html>

结论

在本文中，我们了解了如何使用三种方法使用 JavaScript 创建换行符，这三种方法分别是使用br标签、使用换行符(\n)和使用insertAdjacentHTML()方法，尽管它仅适用于块级元素，但 br 标签和 \n 可以与任何元素一起使用。

更新于: 2024年8月7日

39K+ 浏览量

开启你的职业生涯

通过完成课程获得认证

开始学习
广告