rentetan jquery ke objek dom-Soal Jawab bahagian hadapan-php.cn

rentetan jquery ke objek dom

PHPz

Lepaskan： 2023-05-28 10:56:07

asal

720 orang telah melayarinya

Dalam pembangunan bahagian hadapan, kita selalunya perlu mengendalikan objek DOM, dan kadangkala kita perlu menukar rentetan kepada objek DOM. Rangka kerja jQuery menyediakan kami cara yang sangat mudah untuk mencapai keperluan ini.

Berikut ialah contoh Terdapat butang dan elemen div dalam dokumen HTML.

<!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>

Salin selepas log masuk

Kami mencipta objek div baharu melalui kaedah jQuery $("<div></div>"), dan kemudian gunakan .text(inputStr) untuk menggunakan rentetan dalam kotak input sebagai kandungan elemen div baharu. Tambahkan elemen div baharu pada #container melalui .append(newDiv).

Menggunakan jQuery, sangat mudah untuk menukar rentetan kepada objek DOM, yang sangat memudahkan kerja kami.

Atas ialah kandungan terperinci rentetan jquery ke objek dom. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!