Question

我是网络开发人员和Udacity的前端WebDev Nanodegree的新手，我无法让这个简单的js工作。它应该再添加4个<div>，但它没有正确链接或其他东西。我已经尝试过，筋疲力尽，谷歌和其他SO问题，但它仍然不适合我。

这是我的HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
    </script>
    <script src="test.js"></script>
    <meta charset="UTF-8">
</head>
<body>
<div>
    <div>
        <div id='family1'>
            <h1>Family1</h1>
            <div id='alex'>
                <h2>Alex</h2>
                <div id='jane'>
                    <h3>Jane</h3>
                </div>
            </div>
            <div id='taylor'>
                <h2>Taylor</h2>
                <div id='bob'>
                    <h3>Bob</h3>
                </div>
            </div>
        </div>
    </div>
</div>
</body>

这是我的JS：

var family1, family2, bruce, madison, hunter;

family1 = $('#family1');
family2 = $('<div id="family2"><h1>Family 2</h1></div>');
bruce = $('<div id="bruce"><h2>Bruce</h2></div>');
madison = $('<div id="madison"><h3>Madison</h3></div>');
hunter = $('<div id="hunter"><h3>Hunter</h3></div>');

family2.insertAfter(family1);
family2.append(bruce);
bruce.append(madison);
bruce.append(hunter);

Answer 1

我假设你只需要添加document.ready

$(document).ready(function(){
  var family1, family2, bruce, madison, hunter;

  family1 = $('#family1');
  family2 = $('<div id="family2"><h1>Family 2</h1></div>');
  bruce = $('<div id="bruce"><h2>Bruce</h2></div>');
  madison = $('<div id="madison"><h3>Madison</h3></div>');
  hunter = $('<div id="hunter"><h3>Hunter</h3></div>');

  family2.insertAfter(family1);
  family2.append(bruce);
  bruce.append(madison);
  bruce.append(hunter);
});

由于脚本在你的body标签之前，它试图通过这些id找到所有元素，但实际上，DOM还没有初始化这些元素，所以你必须告诉你的jquery要等到它准备好了”

Answer 2

您需要将脚本标记移动到正文的末尾，以便在尝试访问/修改元素之前存在元素：

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
    </script>
    <meta charset="UTF-8">
</head>
<body>
<div>
    <div>
        <div id='family1'>
            <h1>Family1</h1>
            <div id='alex'>
                <h2>Alex</h2>
                <div id='jane'>
                    <h3>Jane</h3>
                </div>
            </div>
            <div id='taylor'>
                <h2>Taylor</h2>
                <div id='bob'>
                    <h3>Bob</h3>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="test.js"></script>
</body>

您还可以将代码包装在load / ready事件中：

$(document).ready(function(){
  var family1, family2, bruce, madison, hunter;

  family1 = $('#family1');
  family2 = $('<div id="family2"><h1>Family 2</h1></div>');
  bruce = $('<div id="bruce"><h2>Bruce</h2></div>');
  madison = $('<div id="madison"><h3>Madison</h3></div>');
  hunter = $('<div id="hunter"><h3>Hunter</h3></div>');

  family2.insertAfter(family1);
  family2.append(bruce);
  bruce.append(madison);
  bruce.append(hunter);
});

由于某种原因无法加载我的JavaScript

2 个答案: