動態創建的元素存儲在哪里以及如何訪問它們？ jQuery的

Question

我從來沒有真正理解動態創建元素的行為背后發生了什么。 這是一個例子：

$('.some-list').append('<div class="node"></div>');

現在存儲在哪里？ 如何訪問div元素 $（'。node'）？

我知道jQuerys'on'方法的事件，但我如何簡單地訪問和操作該元素？ 謝謝。

Answer 1

無論$('.some-list')本身是否存在於文檔中，您可以簡單地使用：

$('.some-list')
  // append returns the original collection ("$('.some-ist')"),
  // not the newly-added element(s)
  .append('<div class="node"></div>')
  // so here we can use "find('.node')" to find the newly added
  // element(s):
  .find('.node')

如果$('.some-list')已存在於文檔中：

 $('.some-list').append('<div class="node">The newly-added Element</div>').find('.node').css('color', '#f90');

 .some-list div { color: #000; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="some-list"> <div>Existing node</div> </div>

如果$('.node')元素不在文檔中：

 var someList = $('<div />', { 'class': 'some-list', 'html': '<div>Existing element</div>' }), newNode = someList.append('<div class="node">The newly-added Element</div>').find('.node'); console.log(newNode);

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

參考文獻：

append() 。
css() 。
find() 。

Answer 2

因此，讓我們分析一下幕后會發生什么。 首先，我們需要了解看起來像下面的HTML。

<html>
    <head>
        <!-- Some code here -->
    </head>
    <body>
        <!-- Some Code here -->
        <div class="some-list"></div> <!-- Assuming it to be div as that's the most generic way I'd explain, but it could be any element for that matter -->
        <!-- Some Code here -->
    </body>
</html>

請注意，當您編寫$('.some-list') ，JQuery將選擇帶有class=some-list的div，然后在.append('<div class="node"></div>');附加一個隨機字符串。 .append('<div class="node"></div>'); 現在當你使用JQuery的追加時，它會嘗試查看傳遞的數據（在這種情況下是一個字符串）是否是一個對象。 如果對象在內部執行element.appendChild ，則它在內部執行element.innerHTML=string 。

現在要訪問你編寫$（'。node'）的元素，因為這意味着你試圖從類名作為節點獲取dom中的元素。 由於您在.append之后執行此操作，因此它在DOM中可用，您現在可以像DOM中已存在的任何其他元素一樣訪問它。

注意：混淆是由於大多數情況下事件附件在文檔就緒時發生，並且這些動態創建的元素稍后會添加，並且不會觸發這些事件。 為了避免這些情況，請使用委托。 詳細查看JQuery的.on方法。

Answer 3

你只需使用$('.node')....但我認為你明白你不能操縱一個尚不存在的元素（你無法在附加之前訪問.node）

動態創建的元素存儲在哪里以及如何訪問它們？ jQuery的

問題描述

3 個解決方案

解決方案1
2 已采納 2016-06-07 16:49:39

解決方案2
1 2016-06-07 16:57:45

解決方案3
0 2016-06-07 16:47:50

動態創建的元素存儲在哪里以及如何訪問它們？ jQuery的

問題描述

3 個解決方案

解決方案1 2 已采納 2016-06-07 16:49:39

解決方案2 1 2016-06-07 16:57:45

解決方案3 0 2016-06-07 16:47:50

解決方案1
2 已采納 2016-06-07 16:49:39

解決方案2
1 2016-06-07 16:57:45

解決方案3
0 2016-06-07 16:47:50