javascript - 在特定 div 之前插入/添加要填充的内容的新 div

Question

我有一个大型网站，其中每个页面都包含一个 id 为 #google_map_vc_box 的 google map 我想知道是否可以使用 JS 或 jQuery 插入新的 div，其中包含之前的内容整个网站上 #google_map_vc_box 的特定 div。

最近尝试过，但没有雪茄(看起来也是一个相当丑陋/笨重的解决方案)

var $container = $('#google_map_vc_box'),
    $d = $container.find('div');

var $n = $('<div>', {
    data: {
        id: new
    },
    text: sup
});

var $a = $d.filter(function () {
    return $(this).data('id') < new;
}).first();

if ($a.length) $a.after($n)
else $container.prepend($n);

Answer 1

要使用$n ，新建<div> ，考虑到您问题的评论中的说明，并在 #google_map_vc_box 之前插入该元素元素:

$n.insertBefore('#google_map_vc_box');

JS Fiddle demo .

或者:

$('#google_map_vc_box').before($n);

JS Fiddle demo .

而且，使用纯 JavaScript，这并不难:

var $n = document.createElement('div');
$n.id = 'new'; // remember to quote this value, unless it's a variable
var googleBox = document.getElementById('google_map_vc_box');

googleBox.parentNode.insertBefore($n, googleBox);

JS Fiddle demo .

或者甚至:

var googleBox = document.getElementById('google_map_vc_box');

googleBox.insertAdjacentHTML('beforebegin', '<div id="new"></div>');

JS Fiddle demo .

引用文献:

JavaScript:
• Node.insertAdjacentHTML() .
• Node.insertBefore() .
• jQuery:
  • before() .
  • insertBefore() .