注释掉 div，但使用它的内容答案

【问题标题】：Comment out div, but use it's contents注释掉 div，但使用它的内容
【发布时间】：2014-05-04 04:30:37
【问题描述】：

我会让一些 PHP 生成一些 HTML 并填充一个 div。它将加载高分辨率图像，但目前不应显示或加载它们。

我尝试过显示 none，这会将它们隐藏起来，但它们仍在被加载到内存中。稍后我将使用 JavaScript 获取整个 div 的内容，并将它们放在另一个窗口（弹出窗口）中，然后加载它们。

我尝试了以下方法，但是由于某种原因，当我将它们应用到弹出窗口时，它们并没有复制到页面源中，就好像它们不存在一样......

<!-- <div id="print_container2" style="display:none;">
    <div data-type="KR">
        <img onLoad="c++;count_loaded();" id="LKR_1_0" data-quantity="1" src="http://localhost:1234/ppa/php/generateimage.php?imgname=C:/xampp/htdocs/ppa/data/images/20140324/0/034.JPG&restraint=width" class="" />
        <img onLoad="c++;count_loaded();" id="LKR_2_0" data-quantity="2" src="http://localhost:1234/ppa/php/generateimage.php?imgname=C:/xampp/htdocs/ppa/data/images/20140324/0/035.JPG&restraint=width" class="" />
        <img onLoad="c++;count_loaded();" id="LKR_2_1" data-quantity="2" src="http://localhost:1234/ppa/php/generateimage.php?imgname=C:/xampp/htdocs/ppa/data/images/20140324/0/035.JPG&restraint=width" class="" />
        <img onLoad="c++;count_loaded();" id="LKR_4_0" data-quantity="2" src="http://localhost:1234/ppa/php/generateimage.php?imgname=C:/xampp/htdocs/ppa/data/images/20140324/0/037.JPG&restraint=width" class="" />
        <img onLoad="c++;count_loaded();" id="LKR_4_1" data-quantity="2" src="http://localhost:1234/ppa/php/generateimage.php?imgname=C:/xampp/htdocs/ppa/data/images/20140324/0/037.JPG&restraint=width" class="" />
    </div>
</div> -->

JavaScript

popup.innerHTML = document.getElementById('print_container2').innerHTML;

【问题讨论】：

它不存在不存在，您已将其注释掉。您真正想要达到什么目的？
执行innerHTML代码时，它们是否还在cmets中？
但是它们在页面源代码中，所以我认为我仍然可以访问代码？我只需要 PHP 来生成 HTML 元素，但在将元素移动到弹出窗口之前不会将它们加载到内存中。 @蒂姆沃拉
@MartynLeeBall 不，他们不是。有一条评论，里面有一些文字，但没有元素。
刚刚编辑了我的评论 ^ @TimWolla

标签： javascript html

【解决方案1】：

试试：

whatever.onclick = function(){
  popup.innerHTML = <?php echo "'$databaseResult'"; ?>;
}

换句话说，不要将 HTML 存储在任何地方，只需动态创建即可。

【讨论】：

另外，如果你把它和@Marty's 结合起来，他就会拥有它
PHP 在执行 JavaScript 之前生成代码
这与您的问题有什么关系？如果您愿意，PHP 可以echo 或print 任何 HTML 或 JavaScript。也许我们应该看到更多的代码。我需要知道您试图触发什么事件来生成进入popup.innerHTML 的代码。

【解决方案2】：

如果您之前不想加载图像，那么尝试将 div 内容设置为 javascript 中的变量，并在您想将其添加为 innerHtml 时使用它。见下文：

<script>
    var popUpInnerHtml = '<div data-type="KR">' +
        '<img onLoad="c++;count_loaded();" id="LKR_1_0" data-quantity="1" src="http://localhost:1234/ppa/php/generateimage.php?imgname=C:/xampp/htdocs/ppa/data/images/20140324/0/034.JPG&restraint=width" class="" />' +
        '<img onLoad="c++;count_loaded();" id="LKR_2_0" data-quantity="2" src="http://localhost:1234/ppa/php/generateimage.php?imgname=C:/xampp/htdocs/ppa/data/images/20140324/0/035.JPG&restraint=width" class="" />' +
        '<img onLoad="c++;count_loaded();" id="LKR_2_1" data-quantity="2" src="http://localhost:1234/ppa/php/generateimage.php?imgname=C:/xampp/htdocs/ppa/data/images/20140324/0/035.JPG&restraint=width" class="" />' +
        '<img onLoad="c++;count_loaded();" id="LKR_4_0" data-quantity="2" src="http://localhost:1234/ppa/php/generateimage.php?imgname=C:/xampp/htdocs/ppa/data/images/20140324/0/037.JPG&restraint=width" class="" />' +
        '<img onLoad="c++;count_loaded();" id="LKR_4_1" data-quantity="2" src="http://localhost:1234/ppa/php/generateimage.php?imgname=C:/xampp/htdocs/ppa/data/images/20140324/0/037.JPG&restraint=width" class="" />' +
    '</div>';
</script>

然后像下面这样使用它：

popup.innerHTML = popUpInnerHtml;

【讨论】：

我最终使用了将属性 src 更改为 data-src 然后在需要时更改它的方法 src。但这也是一个好方法，谢谢。

【解决方案3】：

您是否尝试过类似的方法：

<script type="text/template">
    // Your HTML here.
</script>

这是实现您想要做的事情的常用方法。 <script> 块意味着内容不会像 HTML 一样被处理或呈现，但它的内容可以通过普通的 DOM 方法访问。

不过，更好的方法是通过 AJAX 按需加载图像，甚至只需在 JS 中创建一个新的 Image 对象。

【讨论】：

不，现在就试一试。

【解决方案4】：

如果它们被注释掉，那么它们就不存在于代码中。我没有看到最初加载它们并稍后显示它们的问题。您也可以将它们存储在另一个页面上，然后在稍后显示弹出窗口时从该页面加载它们。见Don't load hidden images

jQuery 解决方案：

$(function () {
   $("img").not(":visible").each(function () {
       $(this).data("src", this.src);
       this.src = "";
   });

   var reveal = function (selector) {
       var img = $(selector);
       img[0].src = img.data("src");
   }
});

【讨论】：