SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    if ($zee == "Guru") { $zee--;}
    Join Date
    Nov 2005
    Location
    Karachi - Pakistan
    Posts
    1,133
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Cant use <br /> in DOM

    Hi

    I am using DOM's insert row () etc for adding rows to a table dynamically.

    Everything is working as desired, but just 1 problem.

    In a cell of a table, the data need to be added like this

    Code:
    data1+"<br />"+data2+"<br />"+data3+"<br />"
    so i am doing this

    Code:
    var data = data1+"<br />"+data2+"<br />"+data3+"<br />";
    
    var cell1 = row.insertCell(1);
    
    var textNode = document.createTextNode(data);
    
    cell1.appendChild(textNode);
    but it shows me the results like this
    some data <br /> other data <br /> more data <br />

    means it is not BREAKING the line at <br /> but showing <br /> as a TEXT in the cell.

    please help

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,608
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    You are telling it that it is all text so that is what gets added.

    document.createTextNode(data) means that everything in data should be considered to be TEXT.

    If you want to add text AND elements then you need to add each separately. Elements are NOT text.

    Code:
    var cell1 = row.insertCell(1);
    var textNode1 = document.createTextNode(data1);
    cell1.appendChild(textNode1);
    var elem1 = document.createElement('br');
    cell1.appendChild(elem1);
    var textNode2 = document.createTextNode(data2);
    cell1.appendChild(textNode2);
    var elem2 = document.createElement('br');
    cell1.appendChild(elem2);
    var textNode3 = document.createTextNode(data3);
    cell1.appendChild(textNode3);
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    if ($zee == "Guru") { $zee--;}
    Join Date
    Nov 2005
    Location
    Karachi - Pakistan
    Posts
    1,133
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks a lot Sir !

  4. #4
    if ($zee == "Guru") { $zee--;}
    Join Date
    Nov 2005
    Location
    Karachi - Pakistan
    Posts
    1,133
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    but in my case the PHP file (i am using AJAX) returns it with the data with new line thing within it. How to deal with that ?

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    If you're passing plain text back to the page then you'll have to use innerHTML

    Better solutions are available such as JSON or XML, which I suggest that you look in to as well.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It might just be my personal preference but I never return html via AJAX. I find it 10x better to return an json object or xml document and manipulate the dom using the results.


  7. #7
    SitePoint Wizard
    Join Date
    Oct 2005
    Location
    London
    Posts
    1,678
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Theres no harm in returning html via ajax. Is it not overkill to return zml/json when all you need to do is return one line of text...you know just a small text update...like updating a price or total or something.

  8. #8
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    even then you can return the value and update the control using the dom.

    Again, as above, its just my personal preference. AJAX has an X for a reason, XML.


  9. #9
    SitePoint Wizard
    Join Date
    Oct 2005
    Location
    London
    Posts
    1,678
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah but my point is why bother getting the Dom involved when you just need to return a bit of html....why bother with unnecessary DOM manipulation?

  10. #10
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,608
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by elduderino View Post
    Yeah but my point is why bother getting the Dom involved when you just need to return a bit of html....why bother with unnecessary DOM manipulation?
    Perhaps because DOM manipulation is the way that JavaScript uses to update web page content that can then be accessed by subsequent JavaScript.

    Adding HTML using innerHTML doesn't update the DOM and therefore the HTML that is added cannot therefore be further manipulated by JavaScript.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  11. #11
    SitePoint Addict
    Join Date
    Dec 2007
    Posts
    207
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by gRoberts View Post
    It might just be my personal preference but I never return html via AJAX. I find it 10x better to return an json object or xml document and manipulate the dom using the results.
    While I prefer to return json from the server, returning plain html isn't that bad.

    http://www.quirksmode.org/blog/archi...ax_respon.html

    Quote Originally Posted by elduderino View Post
    Theres no harm in returning html via ajax. Is it not overkill to return zml/json when all you need to do is return one line of text...you know just a small text update...like updating a price or total or something.
    Yeah, if its a small snippet it doesn't matter too much.
    mmj

  12. #12
    SitePoint Wizard
    Join Date
    Oct 2005
    Location
    London
    Posts
    1,678
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Adding HTML using innerHTML doesn't update the DOM and therefore the HTML that is added cannot therefore be further manipulated by JavaScript.
    Well i didn't know that and have never been caught our by that before

  13. #13
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,608
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by elduderino View Post
    Well i didn't know that and have never been caught our by that before
    You don't even need to be using Ajax to be caught out by that. All you need is a situation where you are inserting some content into the web page and then want subsequent processing to update a part of what you inserted.

    The first time I actually saw this happen was when I was setting up a digital clock in a web page using JavaScript. I tried to mix using innerHTML and DOM calls to insert the time and location that the time related to into the page and then update the time portion leaving the location untouched. Mixing the two types of call together didn't work because the DOM did not match the content inserted via the innerHTML and the only way to get it to work was to replace the innerHTML cal with the appropriate DOM calls.

    Using innerHTML should be safe enough provided that you don't mix its use with DOM calls trying to access that content as the content will not be in the DOM to access it that way.

    The other thing to remember is that innerHTML doesn't work with XHTML so if you think ther might ever be a reason to convert your pages from HTML to XHTML then using the DOM calls will make the JavaScript much easier to convert as then it is just a matter of substituting the namespace versions of the DOM calls for the non-namespace equivalents rather than having to completely rewrite the script.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">


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
  •