首頁 > web前端 > 前端問答 > jquery 字串轉dom對象

jquery 字串轉dom對象

PHPz
發布: 2023-05-28 10:56:07
原創
755 人瀏覽過

在前端開發中,我們經常需要操作DOM對象,而有時我們需要將字串轉換為DOM對象。 jQuery框架為我們提供了很方便的方法來實現這項需求。

下面是一個例子,在HTML文件中有一個按鈕和一個div元素,我們可以透過點擊按鈕,將輸入框中的字串轉換成一個新的div元素加入到頁面上。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery字符串转DOM对象</title>
    <style>
        #container {
            width: 200px;
            height: 200px;
            border: 1px solid black;
            margin: 50px auto;
            text-align: center;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>
<body>
    <div id="container">
        <button id="btn">添加元素</button>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            $("#btn").on("click", function() {
                var inputStr = prompt("请输入字符串:");
                var newDiv = $("<div></div>").text(inputStr);    // 将字符串转换为DOM对象
                $("#container").append(newDiv);    // 添加新的div元素
            })
        })
    </script>
</body>
</html>
登入後複製

我們透過jQuery的方法$("<div></div>")建立一個新的div對象,接著使用.text(inputStr)將輸入框中的字串作為新的div元素內容。透過.append(newDiv)將新的div元素加入到#container中。

使用jQuery可以非常方便的將字串轉換為DOM對象,大大簡化了我們的工作。

以上是jquery 字串轉dom對象的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板