在amp网页上点击时动态添加html

Question

当使用AMP时，是否可以在点击时动态添加HTML到网页？

一些类似的东西

<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>

而不是文本HTML？

Answer 1

你需要的东西可以使用amp-script来实现。

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

来自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);
});

Answer 2

HTML的内容是预先知道的，还是根据用户输入动态生成的？如果前者比它可以出现在页面中但不可见，你可以用amp-bind和CSS控制它的可见性。如果不是，那么可以使用amp-script作为解决方案。请注意，它目前还处于实验阶段。