如何使用 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+ 瀏覽量

啟動你的職業生涯

完成課程獲得認證

開始學習
廣告