Html id div tag rendering

Ask the community
,
1 
I want to add code like following in main page of my wix site
1. <div id="Myplace"></div>

Then want to populate it in my javacript code as following
2. $w('#Myplace').id.innerHTML="Temperatue is ....";

My proposed solution was to add code snippet in "Body End" in "advanced->custom code"
setting then Write javascript code in dev mdoe "Home" page java script code.
But it doesn't work.
2

You can use an HTML-component to realize your wished idea.

  1. Add an HTML-Component onto your page.
  2. Resize it like you want it to have on your site-page.
  3. Send your wished data to the HTML-Component with…
    https://www.wix.com/velo/reference/$w/htmlcomponent/postmessage
  4. And receive the data in the html-component to work with it…

Something like this…
Page-Code:

let divID = "myPlace"
$w("#myHtmlComponent").postMessage(divID);

HTML-Component-Code:

<!doctype html>
<html>
<head>

<script type="text/javascript">
  function init () {
    window.onmessage = (event) => {
    if (event.data) {
      myPlace = event.data
      console.log(myPlace)
      document.getElementById(myPlace).innerHTML = "Temperatue is ....";
    }
    else{}
  }
}
</script>

</head>
<body onload="init();" style="background-color:lightgray;">
<div id=myPlace></div>
<h1>HTML Component Test</h1>
<p id="demo">Message will go here</p>
</body>
</html>
3

Thanks for answering. But where do I find ‘HTML-Component-Code’? When I load ‘edit site’ I see icon ‘{}’ which has tooltips of ‘files’ and there is no html code here. it all talks about front end javascript and backend javascript and web modules. Its very frustrating to work with such restrictive environment. Wix is not at all user friendly.

4

@madhooleca When i started with wix, i had the same opinion like you, but when you understand the Wix-Editor and how it is structured, you will change your mind.

What you should know?

  1. Yes there are front-end-codes (code-sections) and back-end-codes (code-sections). Front-End-Code is in most cases the Code which you will find directly on your current page. Backend-Code you will find in a separate JSW-file.

  2. Where to add HTML-CODE?
    You can use the wix-ui to put a HTML-Component onto your page…

781×774 166 KB

3) When you have add the HTML-component you then click "Edit-HTML-Component …

559×573 17.5 KB

5

See the docs Coding With Velo , especially the Velo: Javascript support section, to better understand how Wix’s Velo works.

6

You can set the text of an element very simply using the Velo text element API :

$w('#Myplace').text = "Temperatue is ....";

This is not restrictive at all. What else do you need?