Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Eddy Goulart

[Resolvido] criando Tags a partir de id

Por , em Javascript

Recommended Posts

Eddy Goulart    2

Eddy Goulart
Postado

oi turma...

é o seguinte, tenho um input com um id

<input type="text" name="nome" id="nome" />

quero saber se posso criar uma tag <p></p> a parti do id 'nome' do input que por resultado ficaria ao lado

 

<input type="text" name="nome" id="nome" /> <p>AQUI!</p>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Eddy Goulart    2

Eddy Goulart
Postado

alguem? :S

 

quero fazer isso pois estou trabalhando com validações no javascript... é q na tag <p> quero botar o motivo do erro!

Compartilhar este post

Link para o post
Compartilhar em outros sites

klaygomes    0

klaygomes
Postado

Abaixo apenas um exemplo de bem alto nível, apenas para que você possa ter uma ideia

de como poderá fazer isso.

 

<script>
function incluiTexto()
{
	//crio um elemento(nó) do tipo b
	var hB = document.createElement('b');
	//crio um nó de texto
	var hTextNode = document.createTextNode('Olá mundo');
	//insiro no elemento b criado anteriormente
	hB.appendChild(hTextNode);
	//busco o elemento input
	var txtTeste = document.getElementById('teste');
	//acesso o nó visinho (a tag span que inclui) e insiro o elemento b 
	//que havia criado anteriormente como nó filho
	txtTeste.nextSibling.appendChild(hB);
}
</script>
<form>
<input type=text id=teste><span></span><!--Este nó(tag) foi incluido  propositalmente -->
<button onclick="incluiTexto()">Teste</button>
</form>

Dicas:

Procure na internet sobre DOM 2 ou sobre a propriedade innerHTML

 

Abraços,

Compartilhar este post

Link para o post
Compartilhar em outros sites

Eddy Goulart    2

Eddy Goulart
Postado

opaa! vlw pela dica! vou dar olhada nisso! qualquer coisa volto a postar! vlw

Compartilhar este post

Link para o post
Compartilhar em outros sites

Eddy Goulart    2

Eddy Goulart
Postado

tipo fiz essa função aqui mais não funciona.. e acho q era pra funcionar!

function incluiTexto()
{

	var id = document.getElementById('teste');
	
	var elSpan = document.createElement('span');
	
	 elSpan.nextSibling(id);
	
	if(id.nextSibling){
		id.nextSibling.innerHTML = 'Texto desejado!';
	}
}
<form>
<input type=text id=teste><!--Aqui era pra ele inserir a tag span-->
<button onclick="incluiTexto()">Teste</button>
</form>

Compartilhar este post

Link para o post
Compartilhar em outros sites

klaygomes    0

klaygomes
Postado

<input type=text id=teste><!--Aqui era pra ele inserir a tag span-->

 

O problema é que o próximo nó, após o input, é um nó do tipo comentário que

por sua vez não aceita nós aninhados. Você precisa saber como a arvore

do DOM é montada antes de querer saber como altera-la.

 

Aconselho fortemente que você estude sobre o Object Document Model, tenha

certeza que você não vai se arrepender :)

Compartilhar este post

Link para o post
Compartilhar em outros sites

brunocampos_    3

brunocampos_
Postado 

<html>
	<head>
		<script language="javascript">
			function a() {
				var e = document.getElementsByName("campo");
				for(var i=0; i<e.length; i++) {
					var texto = document.createElement("span");
					texto.innerHTML = "Meu texto";
					if(e[i].nextSibling) {
						e[i].parentNode.insertBefore(texto, e[i].nextSibling);
					} else {
						e[i].parentNode.appendChild(texto);
					}
				}
			}
		</script>
	</head>
	<body>
		<input type="text" name="campo" />
		<input type="button" value="teste" onClick="a();" />
	</body>
</html>

Pra usar com ID só substituir var e = document.getElementsByName("campo"); por var e = document.getElementById("campo");, tirar o for e mudar e por e

Compartilhar este post

Link para o post
Compartilhar em outros sites

Eddy Goulart    2

Eddy Goulart
Postado

klaygomes eu sei que nao aceita tag comentario!

botei ali para exemplificar que no caso iria um span.. mais msm asim vlw!

e bruno campos acho que eh isso ai msm cara!!

solucionou meu caso! vlw \o/

Compartilhar este post

Link para o post
Compartilhar em outros sites

Eddy Goulart    2

Eddy Goulart
Postado

aeee

galera

finalmente fiz oque queria!

 

function mostraErro(id, erroTxt, valor){
	if (erroTxt != ''){
		id.style.border = '2px solid #CC0000';
		id.style.background = '#FFECEC';
		
		if (id.nextSibling.nodeName != 'SPAN'){
			var texto = document.createElement("span");
		}else{
			texto = id.nextSibling;
		}		
		
		texto.style.color = '#CC0000';
		texto.style.padding = '0px 5px 5px 25px';
		texto.style.margin = '0px 0px 0px 15px';
		texto.style.background = 'url(f/i/flecha.gif) no-repeat left';
		
		texto.innerHTML = erroTxt;

			if(id.nextSibling) {				
					id.parentNode.insertBefore(texto, id.nextSibling);
			}		
	}else{
		if(id.nextSibling.nodeName == 'SPAN') {				
				id.parentNode.removeChild(id.nextSibling);
		}	
	}
}

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito