Question

我想使用javascript在div中添加一个链接，这个div没有id，但它确实有一个类：

<div class="details">
  <div class="filename">test.xml</div>
  <div class="uploaded">25/12/2012</div>

  <a href="#" class="delete">Delete</a>

  <div class="compat-meta"></div>
</div>

如何在“详细信息”div和“删除”链接上方添加链接？我想添加的链接是：

<a href="#edit_link" class="edit">Edit</a>

Answer 1

去jquery，它很简单干净。

你可以抓住任何具有特定类别的元素

<div class="className" ></div>

像这样

<script>
$('.className'); 
</script>

现在你想在具有delete类的锚点之前附加另一个元素，这比你可以这样做：

$('.delete').before('<a href="#edit_link" class="edit">Edit</a>');

还有其他方法可以在任何其他元素或dom

中附加元素

 1. $('.className').append('<div> i will be appended at the bottom of this element</div>');
 2. $('.className').after('<div> i will be appended right after this element</div>');

使用jquery，你需要它的api，直接在你的页面中使用this链接，或者下载最新的jQuery api并使用它。它更简单，更容易。

Answer 2

function hasClass(element, className) {
    var s = ' ' + element.className + ' ';
    return s.indexOf(' ' + className + ' ') !== -1;
}

 /**
 * from: http://www.dustindiaz.com/getelementsbyclass
 */
function $class(className, context, tag) {
    var classElements = [],
        context = context || document,
        tag = tag || '*';

    var els = context.getElementsByTagName(tag);
    for (var i = 0, ele; ele = els[i]; i++) {
        if (hasClass(ele, className)) {
            classElements.push(ele);
        }
    }
    return classElements;
}

然后使用$class('delete')定位元素，然后添加新元素

Answer 3

最好按ID搜索，效率最高。但是，如果涉及到它，您可以按类或标记名称查找元素。

我建议使用jQuery，并更改现有的标签：

$('a').attr('href', '#edit_link').text('Edit').removeClass('delete').addClass('edit');

如果无法向您找到的元素添加id，请在树中具有id的某个位置找到一个元素，然后从那里开始：

$('#someHigherId > div > a')...

Answer 4

你可以使用jQuery：

$('div.details a.delete').before('<a href="#edit_link" class="edit">Edit</a>');

Answer 5

使用纯JavaScript：

var div = document.getElementsByClassName('details')[0],
    deleteLink = div.getElementsByClassName('delete')[0],
    editLink = document.createElement('a');

editLink.textContent = 'Edit';
editLink.className = 'edit';
editLink.href = '#edit_link';

div.insertBefore(editLink, deleteLink);

Answer 6

You can do it using javascript like this

<script type="text/javascript">
    function addtext(what){
        if (document.createTextNode){
            var link = document.createElement('a');
            link.setAttribute('href', '#edit_link');
            link.setAttribute('id', 'edit');
            link.setAttribute('class', 'edit');
            document.getElementsByTagName("div")[0].appendChild(link)
            document.getElementById("edit").innerHTML = what;
        }
    }
</script>

<div class="details" id="mydiv" onClick="addtext('Edit')">
    <div class="filename">test.xml</div>
    <div class="uploaded">25/12/2012</div>

    <a href="#"  class="delete">Delete</a>


    <div class="compat-meta"></div>
</div>

如何将元素追加到没有id的div

6 个答案: