JQuery-String zum Dom-Objekt-Front-End-Fragen und Antworten-php.cn

JQuery-String zum Dom-Objekt

PHPz

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

Original

720 Leute haben es durchsucht

In der Front-End-Entwicklung müssen wir häufig DOM-Objekte bedienen und manchmal müssen wir Zeichenfolgen in DOM-Objekte konvertieren. Das jQuery-Framework bietet uns eine sehr bequeme Möglichkeit, diese Anforderung zu erfüllen.

Das Folgende ist ein Beispiel. Es gibt eine Schaltfläche und ein div-Element im HTML-Dokument. Wir können auf die Schaltfläche klicken, um die Zeichenfolge im Eingabefeld in ein neues div-Element umzuwandeln und es der Seite hinzuzufügen.

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

Nach dem Login kopieren

Wir fügen über die jQuery-Methode ein neues div-Element zu #container hinzu$("<div></div>")创建一个新的div对象，接着使用.text(inputStr)将输入框中的字符串作为新的div元素内容。通过.append(newDiv).

Mit jQuery ist es sehr praktisch, Zeichenfolgen in DOM-Objekte zu konvertieren, was unsere Arbeit erheblich vereinfacht.

Das obige ist der detaillierte Inhalt vonJQuery-String zum Dom-Objekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!