1

我想使用 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>
4

6 回答 6

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，直接在您的页面中使用此链接，或者，下载最新的 jQuery api 并使用它。它更简单，更容易。

于 2012-12-26T07:16:11.177 回答
0 
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')定位元素，然后添加新元素

于 2012-12-26T07:06:08.040 回答
0

最好按 id 搜索，这是最有效的。但是，如果涉及到它，您也可以按类或标签名称找到元素。

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

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

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

$('#someHigherId > div > a')...
于 2012-12-26T07:06:19.523 回答
0

你可以使用 jQuery：

$('div.details a.delete').before('<a href="#edit_link" class="edit">Edit</a>');
于 2012-12-26T07:13:05.463 回答
0

使用纯 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);
于 2012-12-26T07:32:23.433 回答
0 
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>
于 2012-12-26T07:47:08.447 回答