Results 1 to 8 of 8

Thread: Unable to reformat HTML document data with JavaScript

  1. #1
    Join Date
    Jun 2014

    Unable to reformat HTML document data with JavaScript

    I've made several attempts at getting this to work; all with no success.

    HTML Code:
    <DIV ID="output">
    <SCRIPT language="JavaScript">
    /* var TAG = "SPAN>" */
       var TAG = "PRE>" 
       var NEW_LINE = "\n"  
    /* var NEW_LINE = "
    " */    
       var temp = "one|two|three"
       var x = temp.split("|")
       document.getElementById("output").innerHTML = "<"+TAG
       for (var i = 0; i < x.length; i++) {
          document.getElementById("output").innerHTML += x[i] + NEW_LINE
       document.getElementById("output").innerHTML += "</"+TAG    
    I'm trying to produce the following result page:


    but haven't had success.

    Perhaps you will see something that I am missing.

    Thanks in advance for any help you may be able to provide.

  2. #2
    Join Date
    Feb 2003
    Michigan, USA
    Beware of repeatedly assigning a new value to the innerHTML property that creates invalid HTML:

    var element = document.getElementById(...);
    element.innerHTML = "<div>";
    element.innerHTML += "...";
    element.innerHTML += "</div>";
    As soon as element.innerHTML = "<div>"; is executed, an opening DIV element gets created, but no closing element exists. Some browser will auto close the element. Some will complain that you've created an unbalanced document tree.

    Instead, concatenate a string of HTML and assign it to the innerHTML property at the end:

    var element = document.getElementById(...);
    var html =  "<div>";
    html += "...";
    html += "</div>";
    element.innerHTML = html;

  3. #3
    toicontien has it right -- it's also not a good idea to call innerHTML so much since it's slow, and no longer the recommended method (not that it ever was) for generating new DOM elements.

    Might also help if you weren't using HTML 3.2 style uppercase and the long LONG LONG ago deprecated language attribute... also if you are declaring multiple VAR in a row, you only need to say VAR once and then comma delimit them.

    This is how you're supposed to be doing that now:
    <div id="output">
    <script type="text/javascript"><!--
    function flush(e) { while (e.firstChild) e.removeChild(e.firstChild); }
    	d = document,
    	tag = 'pre',
    	newLine = "\r\n",
    	temp = 'one|two|three',
    	x = temp.split('|'),
    	out = d.getElementById('output'),
    	e = d.createElement(tag);
    	Adding the elements/content to the new tag BEFORE putting it on the DOM
    	actually processes a hair faster.
    for (var i = 0; i < x.length; i++) {
    	e.appendChild(d.createTextNode(x[i] + newLine));
    /* empty div#output */
    while (out.firstChild) out.removeChild(out.firstChild);
    /* then add our new tag all nice and filled with content */
    innerHTML is a relic that in all but the RAREST of cases belongs in the past.

  4. #4
    Join Date
    Mar 2007
    --> JavaScript Frameworks like JQuery, Angular, Node <--
    ... and please remember to wrap code with forum BBCode tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

  5. #5
    @\\.\ -- Just because something is still in use doesn't make it good practice -- People still sleaze out HTML 3.2 (or worse post 3.2 proprietary markup) and slap 4 tranny or 5 lip-service around it, doesn't make that good coding practice either.

    innerHTML is slower, uses more CPU (and therein more battery) and forces a full page reflow/reparse. There are a whole slew of legitimate reasons not to use it, particularly when the DOM often makes it easier to deal with generating content from JS.

    Particularly if you're just making a tag and stuffing text into it.

    Though... wait, that thread you linked to seems to mostly be filled with posts agreeing with me on NOT using it. Yut da?

  6. #6
    Join Date
    Jun 2014

    resolved I did it in my blog

    I did the same thing what you are asking about. I did it in the page - SBTET Result

  7. #7
    Join Date
    Nov 2010
    Quote Originally Posted by deathshadow View Post
    Though... wait, that thread you linked to seems to mostly be filled with posts agreeing with me on NOT using it. Yut da?
    wow... that's an interesting interpretation. The closest I can find to anybody on that thread actually agreeing with you is a few people saying (correctly) that innerHTML is not appropriate in SOME circumstances.

    javascript is full of parallel approaches and the wise approach is to understand them all to be able to choose the best one for the situation at hand. The web is full of innerHTML vs. the DOM debates and for every speed test that you can cite that says one is faster you can find another that says the other is. Everybody's free to be as dogmatic as they like when writing their own code, but I prefer to go with the best tool in the toolbox.

  8. #8
    Quote Originally Posted by xelawho View Post
    wow... that's an interesting interpretation.
    I'm well known for coming away from things with a different understanding than the masses. See why I think HTML 5, OOCSS, LESS, SASS, Bootstrap, jQuery, Yui, Dreamweaver, and a whole host of other things that are popular and trendy are a bunch of halfwit BS that I pity anyone who is forced to use because their boss only knows it as a sick buzzword, and have little if any pity for the people who are DUMB ENOUGH to use any of them by choice.

    There will always be apologists defending outdated, outmoded and just crappy ways of doing things; innerHTML is just another item on the stack of bull in all but the rarest of cases; just like nyetscape 4 style accessing of form elements by name, using getElementxxx EVERY time you access something inside a loop or even in the same program (hence the idiocy of how jQuery does selectors), and the whole host of other 1990's practices that continue to plod on mindlessly to this day.

    But sure, let's dial the clock back to the worst of the browser wars practices, after all that seems to be what HTML 5 is for, so why not have our JavaScript match?

    Of course, JHVH forbid you actually say that --what with the thin skinned wussies who run to the nearest authority figure "WAH, WAH, SOMEBODY SAID SOMETHING NEGATIVE!!!" like 7 year olds on the playground.

    -- edit -- which is not to say I won't use innerHTML either, as I said there are RARE cases where it can/should be used, a great example being when plugging content into an element that is NOT on the DOM yet, since it will be parsed, then you can attach it as a constructed node AFTER; since it is parsed separate from the reflow, it works just as fast if not faster than a pure DOM only solution -- so you're right, just another tool in the toolbox; the key is knowing when the negatives outweigh the positives... most of the time when there are negatives it's because of a whole bunch of endless pointless annoying string additions.

    Be a lot more useful if JS strings were whitespace neutral like PHP ones are.
    Last edited by deathshadow; 06-05-2014 at 02:49 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



X vBulletin 4.2.2 Debug Information

  • Page Generation 0.11885 seconds
  • Memory Usage 2,942KB
  • Queries Executed 16 (?)
More Information
Template Usage (35):
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_global_above_footer
  • (1)ad_global_below_navbar
  • (1)ad_global_header1
  • (1)ad_global_header2
  • (1)ad_navbar_below
  • (1)ad_showthread_firstpost_sig
  • (1)ad_showthread_firstpost_start
  • (1)ad_thread_first_post_content
  • (1)ad_thread_last_post_content
  • (3)bbcode_code
  • (1)bbcode_html
  • (2)bbcode_quote
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)headinclude_bottom
  • (8)memberaction_dropdown
  • (1)navbar
  • (4)navbar_link
  • (1)navbar_moderation
  • (1)navbar_noticebit
  • (1)navbar_tabs
  • (2)option
  • (8)postbit
  • (8)postbit_onlinestatus
  • (8)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available (6):
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files (26):
  • ./showthread.php
  • ./global.php
  • ./includes/class_bootstrap.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/functions_navigation.php
  • ./includes/class_friendly_url.php
  • ./includes/class_hook.php
  • ./includes/class_bootstrap_framework.php
  • ./vb/vb.php
  • ./vb/phrase.php
  • ./includes/functions_facebook.php
  • ./includes/functions_calendar.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_notice.php
  • ./packages/vbattach/attach.php
  • ./vb/types.php
  • ./vb/cache.php
  • ./vb/cache/db.php
  • ./vb/cache/observer/db.php
  • ./vb/cache/observer.php 

Hooks Called (72):
  • init_startup
  • friendlyurl_resolve_class
  • init_startup_session_setup_start
  • database_pre_fetch_array
  • database_post_fetch_array
  • init_startup_session_setup_complete
  • global_bootstrap_init_start
  • global_bootstrap_init_complete
  • cache_permissions
  • fetch_postinfo_query
  • fetch_postinfo
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • load_show_variables
  • load_forum_show_variables
  • global_state_check
  • global_bootstrap_complete
  • global_start
  • style_fetch
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • strip_bbcode
  • friendlyurl_clean_fragment
  • friendlyurl_geturl
  • forumjump
  • cache_templates
  • cache_templates_process
  • template_register_var
  • template_render_output
  • fetch_template_start
  • fetch_template_complete
  • parse_templates
  • fetch_musername
  • notices_check_start
  • notices_noticebit
  • process_templates_complete
  • friendlyurl_redirect_canonical
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • memberaction_dropdown
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • build_navigation_data
  • build_navigation_array
  • check_navigation_permission
  • process_navigation_links_start
  • process_navigation_links_complete
  • set_navigation_menu_element
  • build_navigation_menudata
  • build_navigation_listdata
  • build_navigation_list
  • set_navigation_tab_main
  • set_navigation_tab_fallback
  • navigation_tab_complete
  • fb_like_button
  • showthread_complete
  • page_templates