SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Guru
    Join Date
    Oct 2006
    Location
    Queensland, Australia
    Posts
    852
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Write HTML to Document Using Javascript

    Basically, I have a button which when clicked, should write some html to the page at a specific location. Here's the html currently in the page...

    HTML Code:
    <strong>Weight: </strong><em>(grams)</em>
    <input name="weight[]" type="text" style="width:10%;" />
    <strong>Price: </strong><em>(cents) </em>
    <input name="price[]" type="text" style="width:10%;" />
    <br />
    <strong>Weight: </strong><em>(grams)</em>
    <input name="weight[]" type="text" style="width:10%;" />
    <strong>Price: </strong><em>(cents) </em>
    <input name="price[]" type="text" style="width:10%;" />
    <br>
    <a href="javascript:addPriceRow();">Click</a>
    Everytime that 'Click' link is clicked, I want the following HTML written directly above the <a> tag.

    HTML Code:
    <strong>Weight: </strong><em>(grams)</em>
    <input name="weight[]" type="text" style="width:10%;" />
    <strong>Price: </strong><em>(cents) </em>
    <input name="price[]" type="text" style="width:10%;" />
    <br>
    As usual, any help is greatly appreciated.

  2. #2
    Google Engineer polvero's Avatar
    Join Date
    Oct 2003
    Location
    Mountain View
    Posts
    567
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i'm not sure why the names and id's have []'s in them, but basically if you want to write to any element, you can access the innerHTML property of that node reference.
    Code:
    var example = document.getElementById('example');
    example.innerHTML = 'hello world';
    To set the value of input elements, access their value property:
    Code:
    example.value = 'hello world';

  3. #3
    SitePoint Guru
    Join Date
    Oct 2006
    Location
    Queensland, Australia
    Posts
    852
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by polvero View Post
    i'm not sure why the names and id's have []'s in them, but basically if you want to write to any element, you can access the innerHTML property of that node reference.
    The square brackets put all the values into an array (I'm using PHP which supports this, I'm not sure what other server-side languages do), Dreamweaver added the id's and numbers after the brackets which I've since removed (from the original post also). Thanks for the reply polvero, but I don't want to put test/html in another element, I want to put text/html above the <a> tag.

  4. #4
    SitePoint Guru
    Join Date
    Oct 2006
    Location
    Queensland, Australia
    Posts
    852
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry for the bump but this shouldn't be too hard to do should it?

  5. #5
    SitePoint Guru
    Join Date
    Oct 2006
    Location
    Queensland, Australia
    Posts
    852
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Last time, anyone at all?

  6. #6
    Google Engineer polvero's Avatar
    Join Date
    Oct 2003
    Location
    Mountain View
    Posts
    567
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i don't understand what your question is anymore if it wasn't answered already...??
    You wrote this:
    Basically, I have a button which when clicked, should write some html to the page at a specific location.
    That's as simple as this:
    Code:
    document.getElementById('my-link').onclick = function() {
      document.getElementById('my-content').innerHTML = 'hello world';
    };
    Surely you could figure the rest out? Otherwise I don't think I understand the question.

  7. #7
    SitePoint Wizard stereofrog's Avatar
    Join Date
    Apr 2004
    Location
    germany
    Posts
    4,324
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Wardrop View Post
    Basically, I have a button which when clicked, should write some html to the page at a specific location. Here's the html currently in the page...
    Do you need to replace some text with another or append new text everytime the button is clicked? Here's an illustration of both approaches

    Code:
    <input type=button onclick="change()">
    <div id="change_div">***</div>
    
    <input type=button onclick="append()">
    <div id="append_div">***</div>
    
    
    <script>
    function $(id) {
    	return document.getElementById(id);
    }
    function change() {
    	var html = "hi";
    	$('change_div').innerHTML = html
    }
    function append() {
    	var html = "hi";
    	var p = document.createElement("p");
    	p.innerHTML = html;
    	$('append_div').appendChild(p);
    }
    </script>

  8. #8
    SitePoint Guru
    Join Date
    Oct 2006
    Location
    Queensland, Australia
    Posts
    852
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, I did say...

    Quote Originally Posted by Wardrop View Post
    Basically, I have a button which when clicked, should write some html to the page at a specific location.
    But then I later said where that specific location was...

    Quote Originally Posted by Wardrop View Post
    Everytime that 'Click' link is clicked, I want the following HTML written directly above the <a> tag.
    I wanted to append new text, so stereofrog seems to have done it for me.

    Thanks for that.

  9. #9
    Google Engineer polvero's Avatar
    Join Date
    Oct 2003
    Location
    Mountain View
    Posts
    567
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    directly above the <a> tag.
    Ok gotcha. There is another DOM method called insertBefore which can drop a node in -you guessed it- directly before an element.
    Code:
    var element = document.createElement('div');
    var existingNode = document.getElementById('example');
    existingNode.parentElement.insertBefore(element, existingNode);


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •