JavaScript用append向div添加img元素

好的，让我来为您解答。对于您的问题，JavaScript中可以使用append()方法向div元素添加img元素。例如，使用以下代码可以实现：

var img = document.createElement('img');
img.src = '图片路径';
document.getElementById('YOUR_DIV_ID').appendChild(img);

希望我的回答能够帮助到您。

相关问题

html代码中id="img_list" 是需要动态添加的容器，id="append"里面是静态元素，动态元素和静态元素通用css样式。其问题主要出在动态的所有 class="zhezhao"的节点样式(鼠标滑过时透明度变化)。 问题1：如何让动态元素 class="zhezhao"部分显示正确的样式？ 问题2：静态css样式大部分在动态元素上显示正常，但这样应用是否合理？就是说静态元素应用静态样式，动态元素应用动态样式为合理？

针对问题1，可以采用以下两种方法：

1. 使用事件委托的方式，在父元素上绑定事件，并在事件处理函数中获取目标元素的class为"zhezhao"的节点，再进行样式设置。

示例代码：

document.getElementById("img_list").addEventListener("mouseover", function(event) {
  if (event.target.classList.contains("zhezhao")) {
    event.target.style.opacity = "0.5";
  }
});
document.getElementById("img_list").addEventListener("mouseout", function(event) {
  if (event.target.classList.contains("zhezhao")) {
    event.target.style.opacity = "1";
  }
});

2. 在动态添加元素时，给class为"zhezhao"的节点添加一个新的class，例如"dynamic-zhezhao"，然后在CSS样式表中单独设置该class的样式。

示例代码：

// 动态添加元素时，给class为"zhezhao"的节点添加新的class
var imgList = document.getElementById("img_list");
var newElement = document.createElement("div");
newElement.classList.add("zhezhao", "dynamic-zhezhao");
imgList.appendChild(newElement);

// 在CSS样式表中单独设置dynamic-zhezhao的样式
.dynamic-zhezhao:hover {
  opacity: 0.5;
}

针对问题2，静态元素应用静态样式，动态元素应用动态样式是合理的。这样做的好处是，可以减少动态元素受到静态样式的干扰，保证动态元素的样式可以灵活地进行修改，而不会影响到静态元素的样式。同时，也可以提高代码的可维护性。

ajax循环输出img,Ajax请求二进制流图片Img

好的，针对您的问题，我可以给出一个简单的示例代码，具体实现如下：

HTML部分：

<div id="img-box"></div>

JavaScript部分：

// 发送ajax请求
$.ajax({
    url: 'your-url',
    type: 'GET',
    dataType: 'binary', // 设置响应数据类型为二进制数据流
    processData: false, // 不进行数据处理
    success: function (data) {
        // 创建一个新的Blob对象
        var blob = new Blob([data], { type: 'image/png' }); 
        // 创建一个新的图片对象
        var img = new Image();
        img.onload = function() {
            // 将图片添加到指定的div元素中
            $('#img-box').append(img);
        };
        // 设置图片的src属性为blob对象的URL
        img.src = URL.createObjectURL(blob);
    }
});

上述代码中，我们使用jQuery的ajax方法发送一个GET请求，并将响应数据类型设置为二进制数据流（`dataType: 'binary'`）。在请求成功回调函数中，我们将响应数据封装成一个Blob对象，并创建一个新的Image对象，将Blob对象的URL设置为Image对象的src属性。最后，将Image对象添加到指定的div元素中即可。

需要注意的是，上述代码中我们假设响应数据类型为PNG格式的图片，如果响应类型为其他格式的图片，需要相应地修改代码。