ホームページ > ウェブフロントエンド > jsチュートリアル > Javascript を使用してタグの内側と外側にタグ要素を挿入する方法

Javascript を使用してタグの内側と外側にタグ要素を挿入する方法

autoload
リリース: 2021-04-08 17:26:25
オリジナル
3919 人が閲覧しました

Javascript を使用してタグの内側と外側にタグ要素を挿入する方法

HTML ページ:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
</head>
<body>
</body>
</html>
ログイン後にコピー

1. HTML に要素を追加します

 <script>
        //append()创建一个列表
        const ul=document.createElement("ul");
        //循环来生成多个列表li
        for(let i=1;i<=5;i++){
            const li=document.createElement("li");
            li.textContent=`item${i}`;
            ul.append(li);
        }
        console.log(ul);
</script>
ログイン後にコピー

2. タグの内側に挿入

         li= document.createElement("li");
         li.textContent="第一个元素";
        ul.insertAdjacentElement("afterbegin",li);

         li= document.createElement("li");
         li.textContent="最后一个元素";
         ul.insertAdjacentElement("beforeend",li);
ログイン後にコピー

3. 外側に挿入タグ

         a=document.createElement("a");
         a.innerText="《雪中悍刀行》";
         a.href="http://www.baidu.com";
         ul.insertAdjacentElement("beforebegin",a);

         a1=document.createElement("a");
         a1.innerText="《剑来》";
         a1.href="https://www.php.cn/";
         ul.insertAdjacentElement("afterend",a1);
ログイン後にコピー

推奨: 「2021 js 面接の質問と回答 (大要約)

以上がJavascript を使用してタグの内側と外側にタグ要素を挿入する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート