tilføje/redigere dom -ligge et div omkring element og span under

Forstår ikke het spørgsmålet..  Vil du ændre det beskrevne på klient-siden via javascript?

Hmm..

Måske det havde været lettere for dig at ligge en <div> rundt om <input> til at starte med og så ændre innerHTML på det div!?

<div id="mitUnikkeId"><input type="text" id="tekstFelt" /></div>

function changeDiv() {
  var elm = document.getElementById('mitUnikkeId');
  elm.innerHTML = '<div><input type="text" /><br /><span>&nbsp;</span></div>';
}

Selvfølgelig skal du lige sørge for at trække value fra input feltet med over i det input du laver i innerHTML!

Eller hov..

function changeDiv() {
  var elm = document.getElementById('mitUnikkeId');
  elm.innerHTML = '<div>'+elm.innerHTML+'<br /><span>&nbsp;</span></div>';
}

Sådan måske.. ved ikke om den så automatisk får den indtastede value med. Men ellers kan det også sagtens fikses!

Jeg vil gerne have et svar på min beskrivelse.

Jeg vil ligge noget omkring et allerede eksisterende input felt.

/JJ

grundet det skal være dynamisk, og noget udviklerene i huset ikke konstant skal overveje, endvidere giver det lidt flottere markup i mine øjne.

anri >> ja jeg ønsker at lave noget validering..

Dette validering skal ændre et input fejt fra:

<input type="text" />

til

<div>
<input type="text" /><br />
<span>&nbsp;</span>
</div>

På klient siden.

hvis det fejler..

<ole>

Én metode kunne være at oprette elementerne og så skifte input-elementet ud på følgende måde:

var o = document.getElementById("tekstFelt");
var oo = o.cloneNode(true);
var oDv = document.createElement("div");
var oBr = document.createElement("br");
var oSp = document.createElement("span");
oSp.appendChild(document,createTextNode(" "));
oo.attributes.removeNamedItem("id");
oDv.appendChild(oo);
oDv.appendChild(oBr);
oDv.appendChild(oSp);
o.parentNode.replaceChild(oDv, o);

/mvh
</bole>

phliplip >> Din løsning (08/02-2007 12:18:10) overskriver elementerne, hvorfor alt, der måtte være knyttet til elementerne (f.eks. event-handlers, sat med script/DOM), går tabt.
Når du overskriver et element - ved at overskrive dets parent's innerHTML - er der ikke længere tale om det samme element ... blot et, der på overfladen er magen til  ;o)

- og så har innerHTML aldrig været en valid property - og er helt ubrugelig under XHTML  =)

Okidoki!

Så blev jeg klogere i dag også ;)

Endnu engang tak ole.

Kyler du et svar...

Tak for din tid phliplip !

/JJ

Efter at have tænkt over problematikken, ville jeg nu nok selv vælge en anden fremgangsmåde. For det første er der ikke nogen grund til at bruge et span (inline-element) og et br-element. Du kan blot bruge et div i stedet for de to  ;o)

Hvis ikke der er tale om en masse felter i formen, kunne det måske endda være smartere at lægge ud med en HTML, der ser sådan ud:

<div>
<input id="tekstfelt" type="text">
<div style="display:none">&nbsp;</div>
</div>

- så kunne du, når du validerer - og der opstår en fejl - skrive noget à la (vælg selv, hvordan det skal se ud):

var o = document.getElementById("tekstfelt");
var css = o.parentNode.style;
css.background = "ffff00";
css.border = "1px solid red";
css.padding = "10px";
var oo = o.parentNode.getElementsByTagName("div")[0];
oo.firstChild.nodeValue = "En fejl-tekst";
oo.style.display = "block";

- og det modsatte, hvis der ikke findes fejl ved elementet.
Laves det OOP'et, kan det gøres endnu mere 'sexy'  ;o)

ole: Nu vi er ved det, ville man opnå noget performance mæssigt ved undgå at bruge innerHTML og bruge appendChild etc etc i stedet? Især hvis vi snakker om at det skal køres en hel del gange!

Problemet er at ...

Jeg sidder som frontend udvikler i et "større" web-konsulent hus.. For at formindske mit arbejde mindst muligt har jeg brug for en "outtathebox" løsning.

Så jeg ikke skal bede udviklerne om at skrive ex:
<div>
<input id="tekstfelt" type="text">
<div style="display:none">&nbsp;</div>
</div>


men var <input id="tekstfelt" type="text" />

Vi arbejder efterhånden i en del af de større danske CMS systemer (synkron, dynamicweb, composite - og skal til at igang med siteCore) , og det er 10000% lettere hvis jeg bare har den her JS fil jeg kan smække på/ flytte rundt/ opdatere alene som er uafhængig af CMS'et.

Derfor ønsker jeg bare at knytte det på tekstfeltet, og jeg ønsker ikke at formode der ligger noget omkring.

du skriver : "Efter at have tænkt over problematikken" <- mener du hermed det første forslag ikke er optimalt ?

/JJ

function inputWrapper(objHTMLElement) {
    var div = document.createElement('div');
    var span = document.createElement('span');
    span.appendChild(document.createTextNode(' '));
    div.appendChild(span);
    objHTMLElement.parentNode.insertBefore(div, objHTMLElement);
    div.insertBefore(objHTMLElement, span);
}


inputWrapper køres så med hvert input felt du ønsker, så du skal selv lige loope igennem alle, eller køre det på de specifikke felter hvor det skal bruges.

umle-keera >> med al respekt, så giver din kode ikke megen mening (omend den virker)  =)

I de to sidste linjer indætter du først div'et foran 'objHTMLElement' - hvorefter du indsætter 'objHTMLElement' i div'et foran span'et ... men uden at fjerne 'objHTMLElement' fra DOM'en først. Det er vist ikke logisk  ;o)

Desuden skal du passe på rækkefølgen af DOM-handlinger. Hvis der havde været sat en eller flere event-handlers på elementerne, ville IE leak'e memory med den viste rækkefølge. Den mest hensigtsmæssige rækkefølge er:

function inputWrapper(objHTMLElement) {
    var div = document.createElement('div');
    objHTMLElement.parentNode.insertBefore(div, objHTMLElement);
    var span = document.createElement('span');
    div.appendChild(span);
    span.appendChild(document.createTextNode(' '));
    objHTMLElement.parentNode.removeChild(objHTMLElement);
    div.insertBefore(objHTMLElement, span);
}