Placing tags

kigogu · July 25, 2012

I guess here is the best place to answer, but is there a way to make javascript place an html tag right next to another html tag.

Here is what I mean, say you have:

<html>
<head>
</head>
<body>
<input type="text" />
</body>
</html>

what I want to do is go through the html using javascript, or anything that could accomplish this, to look for an input, then place a button next to it.

So that my output would be:

<html>
<head>
</head>
<body>
<button>Edit</button><input type="text" />
</body>
</html>

any thoughts on this?

Arnsenal · July 25, 2012

If you have a link to a Jquery file in your html document you can use this.

<script type="text/javascript>$("input").before("<button>My Button</button>");</script>

If we need to be more specific about which inputs should get buttons give them a class and we can do something similar.

Does this help?

Jerry

kigogu · July 25, 2012

It didn't do anything xP but it definitely is a step in the right direction, i did not know about the before function so thank you for that ^^ I will try and play around with this so i can hopefully get it to work somehow lol

Arnsenal · July 25, 2012

Do you have Jquery linked in your HTML doc?

xyph · July 25, 2012

<html>

<head>
<script type="text/javascript">
	window.onload = function() {
		// Get all input elements into an object
		var inputs = document.getElementsByTagName('input');
		// Loop through inputs
		for( var i=0; i<inputs.length; i++ ) {
			// create new element to insert before
			var button = document.createElement('button');
			// Set the inner HTML of the button to 'edit'
			button.innerHTML = 'Edit';
			// Append the button before the current input
			document.body.insertBefore(button, inputs[i]);
		}
	}
</script>
</head>

<body>
<input type="text"><br>
<input type="text">
</body>

</html>

kigogu · July 25, 2012

Do you have Jquery linked in your HTML doc?

<script src"../myrelative/jquery/directory/jquery1.5.js"></script>

ahhhhhh i feel retarded....forgot to have the whole $(document).ready(function() { thing initialized, but now it works! xP thank youuu~~~ <3

Arnsenal · July 25, 2012

No problem.

kigogu · July 26, 2012

Is there any way that I could get any values of the objects that the button is placed next to? Like any attributes? That way I could store a value and depending on what button you clicked it would show something different?

The whole reason I am doing this is to create an edit feature so that I could show what fields a user is able to edit, by the buttons, and then when a user clicks on this button they can change certain attributes, for example a textarea you can change the value that it holds.

kigogu · July 26, 2012

<html>

<head>
<script type="text/javascript">
	window.onload = function() {
		// Get all input elements into an object
		var inputs = document.getElementsByTagName('input');
		// Loop through inputs
		for( var i=0; i<inputs.length; i++ ) {
			// create new element to insert before
			var button = document.createElement('button');
			// Set the inner HTML of the button to 'edit'
			button.innerHTML = 'Edit';
			// Append the button before the current input
			document.body.insertBefore(button, inputs[i]);
		}
	}
</script>
</head>

<body>
<input type="text"><br>
<input type="text">
</body>

</html>

Your version, I feel, might be better suited for what I am trying to do since you should be able to pull out the information I need anyways, but I tried to get yours to work and it doesn't. I haven't dove into javascript or the dom very much so maybe it is on my side that it is not working?

Adam · July 26, 2012

What xyph's version does is around the same as what jQuery will do internally. If you're already using jQuery there's no sense in doing it the manual way. What do you mean by "should be able to pull out the information I need anyways"?

Edit

Forgot to mention, it works for me. What browser are you using?

kigogu · July 26, 2012

What xyph's version does is around the same as what jQuery will do internally. If you're already using jQuery there's no sense in doing it the manual way. What do you mean by "should be able to pull out the information I need anyways"?

Edit

Forgot to mention, it works for me. What browser are you using?

I got it to work, xP what i mean by pulling out the information I need i mean

say you have somethinglike:

<html>
<head>
</head>

<body>
<button>Edit</button><input type="text" id="fname" value="first name"><br>
<button>Edit</button><input type="text" id="lname" value="last name">
</body>

</html>

With this, I want to be able to click on edit button and it will bring up another window that will display, say, the value of fname, if i were to click on the edit button that is right beside the fname tag. Or if i were to click on the second button, that it would bring up with the value that lname has.

I hope this makes sense? lol

xyph · July 26, 2012

Well, that's much different than the question you asked in OP.

<html>

<head>
<script type="text/javascript">
	window.onload = function() {
		// Get all input elements into an object
		var inputs = document.getElementsByTagName('input');
		// Loop through inputs
		for( var i=0; i<inputs.length; i++ ) {
			// create new element to insert before
			var button = document.createElement('button');
			// Set the inner HTML of the button to 'edit'
			button.innerHTML = 'Edit';
			// Set onClick action
			button.setAttribute('onclick', "doAlert('"+ inputs[i].id +"')");
			// Append the button before the current input
			document.body.insertBefore(button, inputs[i]);
		}
	}
	function doAlert(elementID) {
		alert('Value of '+ elementID +': '+ document.getElementById(elementID).value);
	}
</script>
</head>

<body>
<input type="text" id="fname"><br>
<input type="text" id="lname">
</body>

</html>

kigogu · July 26, 2012

Well, that's much different than the question you asked in OP.

<html>

<head>
<script type="text/javascript">
	window.onload = function() {
		// Get all input elements into an object
		var inputs = document.getElementsByTagName('input');
		// Loop through inputs
		for( var i=0; i<inputs.length; i++ ) {
			// create new element to insert before
			var button = document.createElement('button');
			// Set the inner HTML of the button to 'edit'
			button.innerHTML = 'Edit';
			// Set onClick action
			button.setAttribute('onclick', "doAlert('"+ inputs[i].id +"')");
			// Append the button before the current input
			document.body.insertBefore(button, inputs[i]);
		}
	}
	function doAlert(elementID) {
		alert('Value of '+ elementID +': '+ document.getElementById(elementID).value);
	}
</script>
</head>

<body>
<input type="text" id="fname"><br>
<input type="text" id="lname">
</body>

</html>

thank you :3 and i know it is much different than my original question, but that was because i wanted to at least try my hands out at it but i couldn't wrap my mind around how i would be able to do it lol the button portion was one of the main problems and i figured if i knew how to get the buttons there then i could get the rest of it on my own xP which didn't work out entirely in my favor

Sign In

Placing tags

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information