jQuery文字列をDOMオブジェクトに変換-フロントエンドQ&A-php.cn

jQuery文字列をDOMオブジェクトに変換

PHPz

リリース： 2023-05-28 10:56:07

オリジナル

719 人が閲覧しました

フロントエンド開発では、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 中国語 Web サイトの他の関連記事を参照してください。