CODEWITHSUNDEEP
javascript
Jenny
Jenny

Reputation: 1735

How to append an element to a div which is without id

I want to use javascript to add a link inside a div, this div doesn't have id , it does has a class though:

<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>

How to add a link inside the "details" div and above the "delete" link? The link I want to add is:

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

Upvotes: 1

Views: 1143

Answers (6)

Ja͢ck
Ja͢ck

Reputation: 173642

Using pure 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);

Upvotes: 0

Vishal Shah
Vishal Shah

Reputation: 37

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>

Upvotes: 0

Manish Mishra
Manish Mishra

Reputation: 12375

go for jquery, it's simple and clean.

you can grab any element with a particular class say 

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

like this

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

now you want to append someother element just before the anchor having delete class, well than you can do this:

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

there are other methods also to append an element inside any other element or 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>');

for using jquery, you will need its api, directly use this link in your page or, download the latest jQuery api and use it. its simpler and easier.

Upvotes: 1

DaveB
DaveB

Reputation: 9530

You could use jQuery:

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

Upvotes: 0

Justin McDonald
Justin McDonald

Reputation: 2166

It's always best to search by id, it is most efficient. However if it comes to it, you may find elements by class or tag name as well.

I recommend using jQuery, and changing the existing tag you have:

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

If it is not possible to add an id to the element you're finding, find an element somewhere higher in the tree that has an id, and go from there:

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

Upvotes: 0

liunian
liunian

Reputation: 440

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;
}

then use the $class('delete') to locate the elements, and then prepend new elements

Upvotes: 0

Related Questions