Dynamically add html on click on a amp webpage

Question

Is it possible to dynamically add HTML to a webpage on click when using AMP?

Something along the lines of the

<button on="tap:AMP.setState({foo: 'amp-bind'})">Say "Hello amp- 
bind"</button>

<div [text]="foo">This is the placeholder to append the new 
content</div>

But rather than text HTML?

score 0 · Answer 1 · answered May 29 '19 at 08:07

What you need can be achieved using amp-script.

https://github.com/ampproject/amphtml/blob/master/extensions/amp-script/amp-script.md

From github:

<!-- hello-world.html -->
<amp-script layout="container" src="https://example.com/hello-world.js">
  <button id="hello">Insert Hello World!</button>
</amp-script>


// hello-world.js
const button = document.getElementById('hello');
button.addEventListener('click', () => {
  const el = document.createElement('h1');
  el.textContent = 'Hello World!';
  // `document.body` is effectively the <amp-script> element.
  document.body.appendChild(el);
});

score 0 · Answer 2 · answered May 29 '19 at 19:09

Are the contents of the HTML known ahead of time or generated dynamically based on user input? If the former than it can be present in the page but not visible and you can control its visibility with amp-bind and CSS. If not then yes amp-script would be a solution. Note that it is currently in experimental.

Dynamically add html on click on a amp webpage

2 Answers2