创建图像元素（修改DOM）

Question

我目前正在学习编程课程，并且正在为一个特定的问题而苦苦挣扎。 我相信我知道答案，但是我想真正地完全理解这个概念。

我试图弄清楚是否在jQuery中使用此语法（如下） 仅是创建图像，还是正在创建图像并修改DOM。

码：

$(document).ready(function() {

  $('<img>', {
    src: 'images/little-book.png',
    alt: 'New Book',
    title: 'This is a good book to read'
  });

});

当我在浏览器中进行测试时（我在“ images”目录中有一个要使用的图像），控制台中没有收到任何错误，但是我也看不到任何渲染。

先感谢您。

Answer 1

您的代码创建了一个新元素，但是没有追加到DOM树中。

您只需要添加它，便会看到修改后的DOM：

$(document).ready(function() {

  $('<img>', { //create new element
    src: 'images/little-book.png',
    alt: 'New Book',
    title: 'This is a good book to read'
  }).appendTo('body'); //append it to the body

});

从文档 ：

如果HTML比没有属性的单个标记更复杂，则元素的实际创建由浏览器的.innerHTML机制处理。 在大多数情况下，jQuery创建一个新的<div>元素并将该元素的innerHTML属性设置为传入的HTML代码段。当参数具有单个标签（带有可选的关闭标签或快速关闭标签）时— $( "<img />" )或$( "<img>" ), $( "<a></a>" ) or $( "<a>" ) － jQuery使用原生JavaScript创建元素.createElement()功能。

Answer 2

   $(document).ready(function(){
// ^ "$" = call to the linked jQuery.js file (This is the same as telling the 
//browser you want to use "ready" function from the jQuery you linked in your html)

$(document).ready(function(){
  // ^ "(document)" the document(DOM)

$(document).ready(function(){
          // ^ when the entire DOM is considered "ready" as all 
          // of the browser requests for resources are satisfied or
          // have received an error.

$(document).ready(function(){
                  // ^ If jQuery is loaded, and the entire DOM and resources have 
                  // been resolved, pass the following "function" (your jQuery code)
                  // back into the document for the browser to show/use. 
                  // (execute the code within once the page is ready.  This is 
                  // where your jQuery typically gets written/executed until you 
                  // separate it out and link your larger javascript file where your 
                  // jQuery functionality will reside and be linked to your html 
                  // document.

以下是您告诉浏览器在页面为视图做好充分准备后对HTML /页面进行的处理。 准备就绪，jQuery已加载并调用美元符号...

$('<img>', {   // Makes an image tag object. give the following attributes

src: 'images/little-book.png',  
// Defines the source of the image using current directory 
// i.e ("www.websiteAddress.com/IMAGES/LITTLE-BOOK.PNG)

alt: 'New Book',  
// Generates the image html element's "alt" value. 
// The plain text that displays if the image doesn't load.

title: 'This is a good book to read'  
// Gives the image tag a title of "This is a good book to read"

});
// Ends the image object. At this point it's been instantiated (exists) 
// and it is a well defined image object to create the html image tag from

Bhojendra添加了“ .appendTo（'body'）;” （删除分号代替点，然后在脚本的新端将其替换将告诉jQuery以下内容。现在，我已实例化（创建）了该对象，并定义了它（图像元素，图像所在的src） ，alt在无法显示或不会显示时调用它，以及title定义它的标题。）现在，我想将其附加到“ body”元素上。

});

成为：

}）。appendTo（'body'）;

^一旦完成元素对象“”，将其附加到body元素。

注意：如果要将“ image”元素定义为以前这样的变量，请使用点符号：

var imgToInsert =   $('<img>', {
src: 'images/little-book.png',
alt: 'New Book',
title: 'This is a good book to read'
});

注意：您IMG的当前代码可以加上前缀“ var varName =” + IMG的所有代码。 如果需要，您现在可以在单独的行“ $（'body'）。append（varName）;”上编写 其中“ varName”与您声明要命名的IMG变量相同，您可以将其调用到普通的“ append”函数中，该函数即为“ appendTo”。 唯一的好处是，您可以然后“附加”任何变量，而不仅仅是您之前立即声明的对象。

这里是jQuery参考，尽管我认为从较新的编码器的角度来看，很难理解它们。

附加：（ http://api.jquery.com/append/ ）

appendTo：（ http://api.jquery.com/appendTo/ ）