adding a tag to page

**bakhanbeigi** · Apr 10, 2007 14:25

I have a page with some buttons I want add some textbox near each button onclick of the buttons (Add code not visiblity)

How can I do it?

**pip** · Apr 11, 2007 01:41

what?

**pip** · Apr 11, 2007 01:42

sorry, I'm confused

**abb** · Apr 11, 2007 01:49

I think he means to have a bunch of buttons on the page, when clicking the buttons, textarea fields will show up?

If that is the case use JS to show hide like:
document.getElementById('your_element_id').style.display = 'block'; // to show or 'none' to hide

**pip** · Apr 11, 2007 01:53

ok... or maybe he means that he wants them dynamically created?

**SimplyFu** · Apr 11, 2007 02:51

is it a bunch of toggling show hide of textarea? or in place editor?

**bakhanbeigi** · Apr 11, 2007 14:10

not show up I want create them dinamicly,

and I have some textboxes too in other page that on load of page I want add some button for each textbox

**muazzez** · Apr 12, 2007 03:28

Code:

  
<script type="text/javascript">

function addTextbox (t) {

var el = document.createElement("input");
el.type="text";
// el.style.display="none";
t.parentNode.insertBefore(el,t.nextSibling);

// alert(t.parentNode.parentNode.innerHTML);
}
 </script>



<body>
<button onclick="addTextbox (this)">add textbox</button>
<button onclick="addTextbox (this)">add textbox</button>
<button onclick="addTextbox (this)">add textbox</button>

Code:

  
<script type="text/javascript">
window.onload = function () {
var el = document.getElementsByTagName('button');
for(var i = 0; i< el.length; i++) {
el[i].onclick= function () {
var txt = document.createElement('input');
txt.type="text";
this.parentNode.insertBefore(txt, this.nextSibling)
}
} 
}
</script>

<body>

<button>button - 0 </button>
<button>button - 1 </button>
<button>button - 2 </button>
<button>button - 3 </button>

**bakhanbeigi** · Apr 12, 2007 04:55

Thank you very much ,
I will test it now

**bakhanbeigi** · Apr 28, 2007 23:09

Now How can I import an string that contain some HTML codes ?

**muazzez** · Apr 29, 2007 03:14

Code:

 
<script type="text/javascript">
window.onload = function () {
var el = document.getElementsByTagName('button');
for(var i = 0; i< el.length; i++) {
el[i].onclick= function () {
var txt = document.createElement('input');
txt.type="text";

this.parentNode.insertBefore(txt, this.nextSibling)
var bold = document.createElement('b');
var boldText = document.createTextNode('my bold text');
bold.appendChild(boldText);
this.parentNode.insertBefore(bold, this.nextSibling)


var italic = document.createElement('i');
var italicText = document.createTextNode('my italic text');
italic.style.color="red";
italic.appendChild(italicText);
this.parentNode.insertBefore(italic, this.nextSibling)

}
} 
}
</script>

<body>

<button>button - 0 </button>
<button>button - 1 </button>
<button>button - 2 </button>
<button>button - 3 </button>

Code:

  
<script type="text/javascript">
window.onload = function () {
var el = document.getElementsByTagName('button');
for(var i = 0; i< el.length; i++) {
el[i].onclick= function () {
var span = document.createElement('span');
this.parentNode.insertBefore(span, this.nextSibling);
var str = "text text text <b style='color:red;'>my bold text</b><i style='color:blue;'> my italic text</i><div style='color:green;'>my div</div>";
this.nextSibling.innerHTML = str;

}
} 
}
</script>

<body>

<button>button - 0 </button>
<button>button - 1 </button>
<button>button - 2 </button>
<button>button - 3 </button>

Code:

  
 
<script type="text/javascript">
window.onload = function () {
var el = document.getElementsByTagName('button');
for(var i = 0; i< el.length; i++) {
el[i].onclick= function () {
var str = "text text text <b style='color:red;'>my bold text</b><i style='color:blue;'> my italic text</i><div style='color:green;'>my div</div>";
this.nextSibling.innerHTML = str;

}
} 
}
</script>

<body>

<button>button - 0 </button><span></span>
<button>button - 1 </button><span></span>
<button>button - 2 </button><span></span>
<button>button - 3 </button><span></span>

**bakhanbeigi** · May 1, 2007 03:15

I changed this code like this :

Code:

<input type="textbox" id="123">

<script language="javascript" >
	addCode('123');
	function addCode(obj){
			var str = "<b>My HTML code</b>";
			texta = document.getElementById(obj);
			texta.nextSibling.innerHTML = str;
	}
</script>

But can not work what is the problem /?

**muazzez** · May 1, 2007 05:34

As far as I know,
<input type="text" id="a123">
id value don't begin with a number.
<script type="text/javascript">

Code:

  
<body>
<input type="text" id="a123">
<script type="text/javascript" >
addCode('a123');
	function addCode(obj){
			var str = "<b>My HTML code</b>";
			texta = document.getElementById(obj);
			alert(texta.nextSibling.nodeName); 
			// Message box displays "SCRIPT" in Internet Explorer.
		       // Message box displays "#text" in Firefox and Opera.
			texta.nextSibling.innerHTML = str;
							
	}	
</script>
</body>

Code:

  
<body>

<input type="text" id="a123">

<script type="text/javascript" >
addCode('a123');
	function addCode(obj){
			var str = "<b>My HTML code</b>";
			texta = document.getElementById(obj);
			var span = document.createElement('span');
			
			texta.parentNode.insertBefore(span,texta.nextSibling);
			texta.nextSibling.innerHTML = str;
			alert(texta.nextSibling.nodeName);  
			alert(texta.parentNode.innerHTML);				
	}
</script>
</body>

Code:

<body>

<input type="text" id="a123">

<script type="text/javascript" >
addCode('a123');
	function addCode(obj){
			var str = "<b>My HTML code</b>";
			texta = document.getElementById(obj);
			var t = document.createTextNode(str);
			texta.parentNode.insertBefore(t,texta.nextSibling);
			 
	}
	alert(texta.parentNode.innerHTML);
		
</script>
</body>

User Tag List

Thread: adding a tag to page

Thread Tools

Display

adding a tag to page

Bookmarks

Bookmarks

Posting Permissions