// 1. mutating using a ref
// renders "<div></div>"
export default function RefMutation(props: any) {
var refDiv: any
async function load() {
if (!refDiv) return
refDiv.innerText = 'ref mutation'
console.log(refDiv) // prints "<div>ref mutation</div>"
}
onMount(load)
return <div ref={refDiv} />
}
// 2. setting a signal
// renders "<div></div>"
export default function SigMutation(props: any) {
const [innerText, setInnerText] = createSignal('')
async function load() {
setInnerText('sig mutation')
}
onMount(load)
return <div innerText={innerText()} />
}
// 3. mutating the dom directly
// renders "<div>dom mutation</div>"
export default function DomMutation(props: any) {
var refDiv: any
async function load() {
const domDiv = document.getElementsByTagName(refDiv.tagName).item(0)! as HTMLElement
domDiv.innerText = 'dom mutation'
}
onMount(load)
return <div ref={refDiv} />
}
// 1. mutating using a ref
// renders "<div></div>"
export default function RefMutation(props: any) {
var refDiv: any
async function load() {
if (!refDiv) return
refDiv.innerText = 'ref mutation'
console.log(refDiv) // prints "<div>ref mutation</div>"
}
onMount(load)
return <div ref={refDiv} />
}
// 2. setting a signal
// renders "<div></div>"
export default function SigMutation(props: any) {
const [innerText, setInnerText] = createSignal('')
async function load() {
setInnerText('sig mutation')
}
onMount(load)
return <div innerText={innerText()} />
}
// 3. mutating the dom directly
// renders "<div>dom mutation</div>"
export default function DomMutation(props: any) {
var refDiv: any
async function load() {
const domDiv = document.getElementsByTagName(refDiv.tagName).item(0)! as HTMLElement
domDiv.innerText = 'dom mutation'
}
onMount(load)
return <div ref={refDiv} />
}