Now let's add the div tag. This is a little more complex than adding the h4 tag.

Go back into Studio and add the following lines in front of that break command:

 s attr("class")="messagePanel"
 s text=$g(attrValue("message"))
 s text=$$removeQuotes^%zewdAPI(text)
 s divOID=$$addElementToDOM^%zewdDOM("div",nodeOID,,.attr,text)

The tag processor method should now look like this:

ClassMethod todaysMessage(nodeOID As %String, ByRef attrValues, docOID As %String, technology As %String)
{
	s h4OID=$$addElementToDOM^%zewdDOM("h4",nodeOID,,,"Message for Today")
	s attr("class")="messagePanel"
	s text=$g(attrValues("message"))
	s text=$$removeQuotes^%zewdAPI(text)
	s divOID=$$addElementToDOM^%zewdDOM("div",nodeOID,,.attr,text)
	break
	QUIT
}

What we're doing is adding a div tag as the second child node of our custom tag. By setting the attr local array, we'll add an attribute of class="messagePanel". The text inside the div needs to be obtained from the message attribute of our custom tag, and we can get that from the attrValues array. Notice that we have to strip the quotes from around the value: we use the handy removeQuotes() method that EWD provides for this purpose. Let's see this new logic in action!

Save and re-compile the class using CTRL & F7, then re-compile the EWD application and view the DOM again:

USER 19d1>q
 
USER>k
 
USER>d compileAll^%zewdAPI("mgwTest",,"csp")
d:\ewdApps\mgwTest\ewdAjaxError.ewd
d:\ewdApps\mgwTest\ewdAjaxErrorRedirect.ewd
d:\ewdApps\mgwTest\ewdErrorRedirect.ewd
d:\ewdApps\mgwTest\tagTest.ewd
 break
 ^
<BREAK>ztodaysMessage+5^mgw.demo.1
USER 19d1>d outputDOM^%zewdDOM(docName,1,2)

Look towards the bottom of the DOM listing and you should now see:

      <demo:todaysmessage message="Hello World!">
         <h4>
            Message for Today
         </h4>
         <div class="messagePanel">
            Hello World!
         </div>
      </demo:todaysmessage>

That's exactly what we want! Now to get rid of the original custom tag...