Mikael Brevik

PHP, MySQL, CSS, XHTML, JavaScript

Legg til paragrafer på toppen eller bunnen av en wrapper

Dato 12. Sep. 2007 Kategori JavaScript

Noen ganger har du kanskje lurt på hvordan du kan legge til en paragraf i toppen av en divisjon, fremfor det appenChild gjør; legger det nye elementet på bunnen av hva som eksisterer. Nedenfor finner du to funksjoner til å legge til paragrafer. Ene legger paragrafene på toppen, mens andre bruker appendChild og legger paragrafen på bunnen.

/*
Insert a paragraph at the top in wrapper with id elementId.
Inserted paragraph has the text newText
*/
function insertBeforeFirstChild (elementId, newText) {
var insertElement = document.createElement('p');
insertElement.appendChild(document.createTextNode(newText));
// Define insertInto node.
var insertInto = document.getElementById(elementId);
// If insertInto.firstChild is undefined,
// insertBefore will behave like appendChild
insertInto.insertBefore(insertElement, insertInto.firstChild);
return true;
}

Eller den tradisjonelle metoden, paragrafen på bunnen:

/*
Add a paragraph at the bottom of the wrap with id elementId.
The paragraph will contain newText
*/
function appendParagraph (elementId, newText) {
var insertElement = document.createElement('p');
insertElement.appendChild(document.createTextNode(newText));
document.getElementById(elementId).appendChild(insertElement);
return true;
}

Hvordan kan det brukes?

<a href="#" onclick="insertBeforeFirstChild('wrapper', 'Min testtekst');">Sett inn tekst på toppen</a>
<a href="#" onclick="appendParagraph('wrapper', 'Min testtekst');">Sett inn tekst på bunnen</a>
<div id="wrapper">
</div>

Og om du i tillegg vil ha en mulighet for å fjerne teksten, kan du bruke setAttribute på onclick og bruk removeChild som andre parameter.

Legg igjen respons

Info om posten

Innlegget ble postet 12.09.07 00:55 og ligger under kategorien JavaScript. Du kan abonnere på kommentarene ved å bruke RSS 2.0 feed. Du kan legge til kommenter, eller trackback fra din blogg/side.