DOM元素和javascript读取它们的顺序[重复]
Posted
技术标签:
【中文标题】DOM元素和javascript读取它们的顺序[重复]【英文标题】：DOM elements and the order in which javascript reads them [duplicate] 【发布时间】：2016-10-01 09:48:59 【问题描述】：概述：我正在通过 javascript 创建 DOM 元素，然后尝试访问它们。问题是它们在 DOM 中不存在（或者这就是我阅读它的方式。）
function init()
pagination();
window.onload = init;
在分页中，我创建了一个名为“more”的 DOM 元素
var more='<div id="more" class="box move"> > </div>';
这与所有其他元素一起显示在控制台日志的“元素”部分。甜的。它在 DOM 中不是吗（不）。
我试图用 jQuery 调用这个 div，但不能。我检查了它是否存在。它没有。
console.log($("#more").length);
我在 html 中创建了一个虚拟 div，以查看 jQuery 是否真的在工作。我检查了它的长度，是的，它就在那里。
$(document).ready(function()
console.log($("#aaa").length); // returns 1
console.log($("#more").length); // returns 0
问题是：让 jQuery 读取这些 DOM 元素的最佳方式是什么？
我的 window.onload 解决方案是否与 jQuery 的 $(document).ready 语句冲突？
代码如下
function initFunction1() ...
function initFunction2() ...
...
function init()
initFunction1();
initFunction2();
window.onload = init;
$(document).ready(function()
); // END jQuery
编辑添加的整个代码示例
<!doctype html>
<head>
<meta charset="utf-8">
<title></title>
<link rel ="stylesheet" href="pagination3.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
<div id="aaa">aaa</div>
<div id="pagination"></div>
</body>
<script src="pagination.js"></script>
</html>
// pagination.js 下面
function pagination()
var myPagination=document.getElementById("pagination");
var myDivStart='<div class="box">';
var myDivEnd='</div>';
/* */
var first='<div id="first" class="box move"> FIRST </div>';
var last='<div id="last" class="box move"> LAST </div>';
var less='<div id="less1" class="box move"> < </div>';
var less10='<div id="less10" class="box move"> < 10 </div>';
var less100='<div id="less100" class="box move"> < 100 </div>';
var more='<div id="more1" class="box move"> > </div>';
var more10='<div id="more10" class="box move"> 10 > </div>';
var more100='<div id="more100" class="box move"> 100 > </div>';
/* */
var radioButtonStart='<input type="radio" name="pagination" id="radio';
var radioButtonLabelStart='"><label for="radio';
var radioButtonLabelEnd='">';
var radioButtonEnd='</label>';
myPagination.innerHTML = first + less100 + less10 + less;
for(i=640; i<650; i++)
// myPagination.innerHTML += myDivStart + i + myDivEnd;
myPagination.innerHTML += radioButtonStart + i + radioButtonLabelStart + i + radioButtonLabelEnd + i + radioButtonEnd;
myPagination.innerHTML += more + more10 + more100 + last;
return myPagination;
function init()
pagination();
window.onload = init;
$(document).ready(function()
console.log($("#aaa").length);
console.log($("#more10").length);
$("#more10").click(function()
console.log("aaa");
/*
1.get last radio button
2.add ten
3.send to for loop and recalculate
*/
var lastRadio="sss";
console.log(lastRadio);
);
); // END jQuery
【问题讨论】：
将新节点附加到 DOM 的代码在哪里？ 关于您的最后一个问题：window.onload vs $(document).ready() 我想你已经回答了你自己的问题：***.com/a/3698214/575199 您是否将more 添加到 DOM 中？仅仅创建一个 HTML 字符串甚至节点都不会这样做。
$(document).ready() 运行 之前 window.onload。这就是该元素尚未在 DOM 中的原因。
【参考方案1】：
一些问题：
jQuery ready 回调在 window.onload 回调之前触发。 jQuery的ready事件对应DOM的document.DOMContentLoaded事件，DOM的load事件对应jQuery的load事件。
混合使用 jQuery 和原生 DOM API 调用。这本身不是问题，但如果你愿意使用原生 DOM API，为什么还要使用 jQuery？或者如果你想使用 jQuery，为什么还要使用原生 DOM API 的较长语法？
似乎没有充分的理由回应load 事件；你可以加入这两段代码并在ready
所以，删除这一行：
window.onload = init;
在ready 处理程序的开头添加对init 的调用：
$(document).ready(function()
init();
console.log($("#aaa").length);
console.log($("#more10").length);
$("#more10").click(function()
// ... etc.
);
);
这样您将看到#more10 被找到，并且点击处理程序正常工作。
【讨论】：
根据问题，这是在pagination()函数中完成的。
他说在“元素”部分。这显示了 DOM 的内容。
添加现有代码以使其更清晰。
根据您的最新编辑更新了我的答案。
@trincot 谢谢。我想通了阅读 cmets 到我的帖子。但是谢谢发帖。以上是关于DOM元素和javascript读取它们的顺序[重复]的主要内容，如果未能解决你的问题，请参考以下文章